<!DOCTYPE html><html lang="en"><head>
<meta charset="utf-8">
<meta name="generator" content="ReSpec 35.4.2">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<style>
span.example-title{text-transform:none}
:is(aside,div).example,div.illegal-example{padding:.5em;margin:1em 0;position:relative;clear:both}
div.illegal-example{color:red}
div.illegal-example p{color:#000}
aside.example div.example{border-left-width:.1em;border-color:#999;background:#fff}
</style>
<style>
.issue-label{text-transform:initial}
.warning>p:first-child{margin-top:0}
.warning{padding:.5em;border-left-width:.5em;border-left-style:solid}
span.warning{padding:.1em .5em .15em}
.issue.closed span.issue-number{text-decoration:line-through}
.issue.closed span.issue-number::after{content:" (Closed)";font-size:smaller}
.warning{border-color:#f11;border-color:var(--warning-border,#f11);border-width:.2em;border-style:solid;background:#fbe9e9;background:var(--warning-bg,#fbe9e9);color:#000;color:var(--text,#000)}
.warning-title:before{content:"⚠";font-size:1.3em;float:left;padding-right:.3em;margin-top:-.3em}
li.task-list-item{list-style:none}
input.task-list-item-checkbox{margin:0 .35em .25em -1.6em;vertical-align:middle}
.issue a.respec-gh-label{padding:5px;margin:0 2px 0 2px;font-size:10px;text-transform:none;text-decoration:none;font-weight:700;border-radius:4px;position:relative;bottom:2px;border:none;display:inline-block}
</style>
<style>
dfn{cursor:pointer}
.dfn-panel{position:absolute;z-index:35;min-width:300px;max-width:500px;padding:.5em .75em;margin-top:.6em;font-family:"Helvetica Neue",sans-serif;font-size:small;background:#fff;background:var(--indextable-hover-bg,#fff);color:#000;color:var(--text,#000);box-shadow:0 1em 3em -.4em rgba(0,0,0,.3),0 0 1px 1px rgba(0,0,0,.05);box-shadow:0 1em 3em -.4em var(--tocsidebar-shadow,rgba(0,0,0,.3)),0 0 1px 1px var(--tocsidebar-shadow,rgba(0,0,0,.05));border-radius:2px}
.dfn-panel:not(.docked)>.caret{position:absolute;top:-9px}
.dfn-panel:not(.docked)>.caret::after,.dfn-panel:not(.docked)>.caret::before{content:"";position:absolute;border:10px solid transparent;border-top:0;border-bottom:10px solid #fff;border-bottom-color:var(--indextable-hover-bg,#fff);top:0}
.dfn-panel:not(.docked)>.caret::before{border-bottom:9px solid #a2a9b1;border-bottom-color:var(--indextable-hover-bg,#a2a9b1)}
.dfn-panel *{margin:0}
.dfn-panel b{display:block;color:#000;color:var(--text,#000);margin-top:.25em}
.dfn-panel ul a[href]{color:#333;color:var(--text,#333)}
.dfn-panel>div{display:flex}
.dfn-panel a.self-link{font-weight:700;margin-right:auto}
.dfn-panel .marker{padding:.1em;margin-left:.5em;border-radius:.2em;text-align:center;white-space:nowrap;font-size:90%;color:#040b1c}
.dfn-panel .marker.dfn-exported{background:#d1edfd;box-shadow:0 0 0 .125em #1ca5f940}
.dfn-panel .marker.idl-block{background:#8ccbf2;box-shadow:0 0 0 .125em #0670b161}
.dfn-panel a:not(:hover){text-decoration:none!important;border-bottom:none!important}
.dfn-panel a[href]:hover{border-bottom-width:1px}
.dfn-panel ul{padding:0}
.dfn-panel li{margin-left:1em}
.dfn-panel.docked{position:fixed;left:.5em;top:unset;bottom:2em;margin:0 auto;max-width:calc(100vw - .75em * 2 - .5em - .2em * 2);max-height:30vh;overflow:auto}
</style>


<title>Design Tokens Color Module</title>

<meta name="color-scheme" content="light dark">

<style>

      :root {
        /* Remove watermark negatively impacting readability */
        --unofficial-watermark: none !important;
      }

      .rfc2119 {
        font-style: normal;
        font-size: 0.875em;
      }

</style>

<style id="respec-mainstyle">
@keyframes pop{
0%{transform:scale(1,1)}
25%{transform:scale(1.25,1.25);opacity:.75}
100%{transform:scale(1,1)}
}
a.internalDFN{color:inherit;border-bottom:1px solid #99c;text-decoration:none}
a.externalDFN{color:inherit;border-bottom:1px dotted #ccc;text-decoration:none}
a.bibref{text-decoration:none}
.respec-offending-element:target{animation:pop .25s ease-in-out 0s 1}
.respec-offending-element,a[href].respec-offending-element{text-decoration:red wavy underline}
@supports not (text-decoration:red wavy underline){
.respec-offending-element:not(pre){display:inline-block}
.respec-offending-element{background:url() bottom repeat-x}
}
#references :target{background:#eaf3ff;animation:pop .4s ease-in-out 0s 1}
cite .bibref{font-style:italic}
a[href].orcid{padding-left:4px;padding-right:4px}
a[href].orcid>svg{margin-bottom:-2px}
ol.tof,ul.tof{list-style:none outside none}
.caption{margin-top:.5em;font-style:italic}
#issue-summary>ul{column-count:2}
#issue-summary li{list-style:none;display:inline-block}
details.respec-tests-details{margin-left:1em;display:inline-block;vertical-align:top}
details.respec-tests-details>*{padding-right:2em}
details.respec-tests-details[open]{z-index:999999;position:absolute;border:thin solid #cad3e2;border-radius:.3em;background-color:#fff;padding-bottom:.5em}
details.respec-tests-details[open]>summary{border-bottom:thin solid #cad3e2;padding-left:1em;margin-bottom:1em;line-height:2em}
details.respec-tests-details>ul{width:100%;margin-top:-.3em}
details.respec-tests-details>li{padding-left:1em}
.self-link:hover{opacity:1;text-decoration:none;background-color:transparent}
aside.example .marker>a.self-link{color:inherit}
.header-wrapper{display:flex;align-items:baseline}
:is(h2,h3,h4,h5,h6):not(#toc>h2,#abstract>h2,#sotd>h2,.head>h2){position:relative;left:-.5em}
:is(h2,h3,h4,h5,h6):not(#toch2)+a.self-link{color:inherit;order:-1;position:relative;left:-1.1em;font-size:1rem;opacity:.5}
:is(h2,h3,h4,h5,h6)+a.self-link::before{content:"§";text-decoration:none;color:var(--heading-text)}
:is(h2,h3)+a.self-link{top:-.2em}
:is(h4,h5,h6)+a.self-link::before{color:#000}
@media (max-width:767px){
dd{margin-left:0}
}
@media print{
.removeOnSave{display:none}
}
</style>
<meta name="color-scheme" content="light">
<meta name="description" content="This document describes the technical specification for design token
        color values and opacity.">
<style>
.hljs{--base:#fafafa;--mono-1:#383a42;--mono-2:#686b77;--mono-3:#717277;--hue-1:#0b76c5;--hue-2:#336ae3;--hue-3:#a626a4;--hue-4:#42803c;--hue-5:#ca4706;--hue-5-2:#c91243;--hue-6:#986801;--hue-6-2:#9a6a01}
@media (prefers-color-scheme:dark){
.hljs{--base:#282c34;--mono-1:#abb2bf;--mono-2:#818896;--mono-3:#5c6370;--hue-1:#56b6c2;--hue-2:#61aeee;--hue-3:#c678dd;--hue-4:#98c379;--hue-5:#e06c75;--hue-5-2:#be5046;--hue-6:#d19a66;--hue-6-2:#e6c07b}
}
.hljs{display:block;overflow-x:auto;padding:.5em;color:#383a42;color:var(--mono-1,#383a42);background:#fafafa;background:var(--base,#fafafa)}
.hljs-comment,.hljs-quote{color:#717277;color:var(--mono-3,#717277);font-style:italic}
.hljs-doctag,.hljs-formula,.hljs-keyword{color:#a626a4;color:var(--hue-3,#a626a4)}
.hljs-deletion,.hljs-name,.hljs-section,.hljs-selector-tag,.hljs-subst{color:#ca4706;color:var(--hue-5,#ca4706);font-weight:700}
.hljs-literal{color:#0b76c5;color:var(--hue-1,#0b76c5)}
.hljs-addition,.hljs-attribute,.hljs-meta-string,.hljs-regexp,.hljs-string{color:#42803c;color:var(--hue-4,#42803c)}
.hljs-built_in,.hljs-class .hljs-title{color:#9a6a01;color:var(--hue-6-2,#9a6a01)}
.hljs-attr,.hljs-number,.hljs-selector-attr,.hljs-selector-class,.hljs-selector-pseudo,.hljs-template-variable,.hljs-type,.hljs-variable{color:#986801;color:var(--hue-6,#986801)}
.hljs-bullet,.hljs-link,.hljs-meta,.hljs-selector-id,.hljs-symbol,.hljs-title{color:#336ae3;color:var(--hue-2,#336ae3)}
.hljs-emphasis{font-style:italic}
.hljs-strong{font-weight:700}
.hljs-link{text-decoration:underline}
</style>
<style>
var:hover{text-decoration:underline;cursor:pointer}
var.respec-hl{color:var(--color,#000);background-color:var(--bg-color);box-shadow:0 0 0 2px var(--bg-color)}
@media (prefers-color-scheme:dark){
var.respec-hl{filter:saturate(.9) brightness(.9)}
}
var.respec-hl-c1{--bg-color:#f4d200}
var.respec-hl-c2{--bg-color:#ff87a2}
var.respec-hl-c3{--bg-color:#96e885}
var.respec-hl-c4{--bg-color:#3eeed2}
var.respec-hl-c5{--bg-color:#eacfb6}
var.respec-hl-c6{--bg-color:#82ddff}
var.respec-hl-c7{--bg-color:#ffbcf2}
@media print{
var.respec-hl{background:0 0;color:#000;box-shadow:unset}
}
</style>
<style>
var{position:relative;cursor:pointer}
var[data-type]::after,var[data-type]::before{position:absolute;left:50%;top:-6px;opacity:0;transition:opacity .4s;pointer-events:none}
var[data-type]::before{content:"";transform:translateX(-50%);border-width:4px 6px 0 6px;border-style:solid;border-color:transparent;border-top-color:#222}
var[data-type]::after{content:attr(data-type);transform:translateX(-50%) translateY(-100%);background:#222;text-align:center;font-family:"Dank Mono","Fira Code",monospace;font-style:normal;padding:6px;border-radius:3px;color:#daca88;text-indent:0;font-weight:400}
var[data-type]:hover::after,var[data-type]:hover::before{opacity:1}
</style>
<script id="initialUserConfig" type="application/json">{
  "specStatus": "CG-DRAFT",
  "isPreview": false,
  "subtitle": "Third Editors’ Draft",
  "group": "design-tokens",
  "thisVersion": null,
  "latestVersion": null,
  "prevVersion": null,
  "edDraftURI": null,
  "editors": [
    {
      "name": "Adekunle Oduye",
      "url": "https://www.adekunleoduye.com"
    },
    {
      "name": "Ayesha Mazrana (Mazumdar)",
      "url": "https://github.com/ayeshakmaz"
    },
    {
      "name": "Kathleen McMahon",
      "url": "https://kathleenmcmahon.dev"
    },
    {
      "name": "Matthew Ström-Awn",
      "url": "https://matthewstrom.com"
    }
  ],
  "github": {
    "repoURL": "https://github.com/design-tokens/community-group",
    "branch": "color-first-draft"
  },
  "tocIntroductory": true,
  "publishISODate": "2025-07-20T00:00:00.000Z",
  "generatedSubtitle": "Draft Community Group Report 20 July 2025"
}</script>
<link rel="stylesheet" href="https://www.w3.org/StyleSheets/TR/2021/cg-draft">
<link rel="stylesheet" media="(prefers-color-scheme: dark)" href="https://www.w3.org/StyleSheets/TR/2021/dark.css"></head>

  <body class="h-entry"><div class="head">
    <p class="logos"><a class="logo" href="https://www.designtokens.org"><img crossorigin="" alt="Design Tokens Community Group" height="128" id="dtcg-logo" src="/assets/dtcg-logo-on-color.svg" width="128" style="background:none">
  </a></p>
    <h1 id="title" class="title">Design Tokens Color Module</h1> <h2 id="subtitle" class="subtitle">Third Editors’ Draft</h2>
    <p id="w3c-state">
      <a href="https://www.w3.org/standards/types#reports">Draft Community Group Report</a>
      <time class="dt-published" datetime="2025-07-20">20 July 2025</time>
    </p>
    <dl>

      <dt>Latest published version:</dt><dd>
              none
            </dd>





      <dt>Editors:</dt><dd class="editor p-author h-card vcard">
    <a class="u-url url p-name fn" href="https://www.adekunleoduye.com">Adekunle Oduye</a>
  </dd><dd class="editor p-author h-card vcard">
    <a class="u-url url p-name fn" href="https://github.com/ayeshakmaz">Ayesha Mazrana (Mazumdar)</a>
  </dd><dd class="editor p-author h-card vcard">
    <a class="u-url url p-name fn" href="https://kathleenmcmahon.dev">Kathleen McMahon</a>
  </dd><dd class="editor p-author h-card vcard">
    <a class="u-url url p-name fn" href="https://matthewstrom.com">Matthew Ström-Awn</a>
  </dd>


      <dt>Feedback:</dt><dd>
        <a href="https://github.com/design-tokens/community-group/">GitHub design-tokens/community-group</a>
        (<a href="https://github.com/design-tokens/community-group/pulls/">pull requests</a>,
        <a href="https://github.com/design-tokens/community-group/issues/new/choose">new issue</a>,
        <a href="https://github.com/design-tokens/community-group/issues/">open issues</a>)
      </dd>

    </dl>


    <hr title="Separator for header">
  </div>


    <section id="abstract" class="introductory"><h2>Abstract</h2>
      <p>
        This document describes the technical specification for design token
        color values and opacity.
      </p>
    </section>

    <section id="sotd" class="introductory"><h2>Status of This Document</h2><p>
      This specification was published by the
      <a href="https://www.w3.org/groups/cg/design-tokens">Design Tokens Community Group</a>. It is not a W3C Standard nor is it
      on the W3C Standards Track.

            Please note that under the
            <a href="https://www.w3.org/community/about/agreements/cla/">W3C Community Contributor License Agreement (CLA)</a>
                        there is a limited opt-out and other conditions apply.

      Learn more about
      <a href="https://www.w3.org/community/">W3C Community and Business Groups</a>.
    </p>
      <p>
        This section describes the status of this document at the time of its
        publication. Other documents may supersede this document. A list of
        current W3C Community Group reports and the latest revision of this
        report can be found in the W3C Community Group reports index at
        <a href="https://www.w3.org/community/reports/">https://www.w3.org/community/reports/</a>.
      </p>
      <p>
        This document was published by the DTCG as a
        <a href="https://www.w3.org/policies/process/#RecsWD">Working Draft</a>
        following the definitions provided by the W3C process. It is provided for
        discussion only and may change at any moment. Its publication here does not
        imply endorsement of its contents by W3C or the Design Tokens Community Group
        Membership. Don’t cite this document other than as work in progress.
      </p>
      <p>
        While not a W3C recommendation, this classification is intended to
        clarify that, after extensive consensus-building, this specification is
        intended for implementation.
      </p>
      <p>
        This specification is considered unstable, and should not be implemented.
      </p>
    <p>
    <a href="https://github.com/design-tokens/community-group/issues/">GitHub Issues</a> are preferred for
          discussion of this specification.

  </p></section><nav id="toc"><h2 class="introductory" id="table-of-contents">Table of Contents</h2><ol class="toc"><li class="tocline"><a class="tocxref" href="#abstract">Abstract</a></li><li class="tocline"><a class="tocxref" href="#sotd">Status of This Document</a></li><li class="tocline"><a class="tocxref" href="#conformance"><bdi class="secno">1. </bdi>Conformance</a></li><li class="tocline"><a class="tocxref" href="#introduction"><bdi class="secno">2. </bdi>Introduction</a><ol class="toc"><li class="tocline"><a class="tocxref" href="#color-tokens"><bdi class="secno">2.1 </bdi>Color Tokens</a></li></ol></li><li class="tocline"><a class="tocxref" href="#color-terminology"><bdi class="secno">3. </bdi>Color terminology</a></li><li class="tocline"><a class="tocxref" href="#color-type"><bdi class="secno">4. </bdi>Color type</a><ol class="toc"><li class="tocline"><a class="tocxref" href="#format"><bdi class="secno">4.1 </bdi>Format</a><ol class="toc"><li class="tocline"><a class="tocxref" href="#the-none-keyword"><bdi class="secno">4.1.1 </bdi>The <code>none</code> keyword</a><ol class="toc"><li class="tocline"><a class="tocxref" href="#using-the-none-keyword"><bdi class="secno">4.1.1.1 </bdi>Using the <code>none</code> keyword</a></li></ol></li></ol></li><li class="tocline"><a class="tocxref" href="#supported-color-spaces"><bdi class="secno">4.2 </bdi>Supported Color spaces</a><ol class="toc"><li class="tocline"><a class="tocxref" href="#srgb"><bdi class="secno">4.2.1 </bdi>sRGB</a><ol class="toc"><li class="tocline"><a class="tocxref" href="#components"><bdi class="secno">4.2.1.1 </bdi>Components</a></li></ol></li><li class="tocline"><a class="tocxref" href="#srgb-linear"><bdi class="secno">4.2.2 </bdi>sRGB linear</a><ol class="toc"><li class="tocline"><a class="tocxref" href="#components-0"><bdi class="secno">4.2.2.1 </bdi>Components</a></li></ol></li><li class="tocline"><a class="tocxref" href="#hsl"><bdi class="secno">4.2.3 </bdi>HSL</a><ol class="toc"><li class="tocline"><a class="tocxref" href="#components-1"><bdi class="secno">4.2.3.1 </bdi>Components</a></li></ol></li><li class="tocline"><a class="tocxref" href="#hwb"><bdi class="secno">4.2.4 </bdi>HWB</a><ol class="toc"><li class="tocline"><a class="tocxref" href="#components-2"><bdi class="secno">4.2.4.1 </bdi>Components</a></li></ol></li><li class="tocline"><a class="tocxref" href="#cielab"><bdi class="secno">4.2.5 </bdi>CIELAB</a><ol class="toc"><li class="tocline"><a class="tocxref" href="#components-3"><bdi class="secno">4.2.5.1 </bdi>Components</a></li></ol></li><li class="tocline"><a class="tocxref" href="#lch"><bdi class="secno">4.2.6 </bdi>LCH</a><ol class="toc"><li class="tocline"><a class="tocxref" href="#components-4"><bdi class="secno">4.2.6.1 </bdi>Components</a></li></ol></li><li class="tocline"><a class="tocxref" href="#oklab"><bdi class="secno">4.2.7 </bdi>OKLAB</a><ol class="toc"><li class="tocline"><a class="tocxref" href="#components-5"><bdi class="secno">4.2.7.1 </bdi>Components</a></li></ol></li><li class="tocline"><a class="tocxref" href="#oklch"><bdi class="secno">4.2.8 </bdi>OKLCH</a><ol class="toc"><li class="tocline"><a class="tocxref" href="#components-6"><bdi class="secno">4.2.8.1 </bdi>Components</a></li></ol></li><li class="tocline"><a class="tocxref" href="#display-p3"><bdi class="secno">4.2.9 </bdi>Display P3</a><ol class="toc"><li class="tocline"><a class="tocxref" href="#components-7"><bdi class="secno">4.2.9.1 </bdi>Components</a></li></ol></li><li class="tocline"><a class="tocxref" href="#a98-rgb"><bdi class="secno">4.2.10 </bdi>A98 RGB</a><ol class="toc"><li class="tocline"><a class="tocxref" href="#components-8"><bdi class="secno">4.2.10.1 </bdi>Components</a></li></ol></li><li class="tocline"><a class="tocxref" href="#prophoto-rgb"><bdi class="secno">4.2.11 </bdi>ProPhoto RGB</a><ol class="toc"><li class="tocline"><a class="tocxref" href="#components-9"><bdi class="secno">4.2.11.1 </bdi>Components</a></li></ol></li><li class="tocline"><a class="tocxref" href="#rec-2020"><bdi class="secno">4.2.12 </bdi>Rec 2020</a><ol class="toc"><li class="tocline"><a class="tocxref" href="#components-10"><bdi class="secno">4.2.12.1 </bdi>Components</a></li></ol></li><li class="tocline"><a class="tocxref" href="#xyz-d65"><bdi class="secno">4.2.13 </bdi>XYZ-D65</a><ol class="toc"><li class="tocline"><a class="tocxref" href="#components-11"><bdi class="secno">4.2.13.1 </bdi>Components</a></li></ol></li><li class="tocline"><a class="tocxref" href="#xyz-d50"><bdi class="secno">4.2.14 </bdi>XYZ-D50</a><ol class="toc"><li class="tocline"><a class="tocxref" href="#components-12"><bdi class="secno">4.2.14.1 </bdi>Components</a></li></ol></li></ol></li><li class="tocline"><a class="tocxref" href="#future-color-space-support"><bdi class="secno">4.3 </bdi>Future color space support</a></li></ol></li><li class="tocline"><a class="tocxref" href="#gamut-mapping"><bdi class="secno">5. </bdi>Gamut mapping</a></li><li class="tocline"><a class="tocxref" href="#interpolation"><bdi class="secno">6. </bdi>Interpolation</a></li><li class="tocline"><a class="tocxref" href="#token-naming"><bdi class="secno">7. </bdi>Token naming</a><ol class="toc"><li class="tocline"><a class="tocxref" href="#categorization"><bdi class="secno">7.1 </bdi>Categorization</a><ol class="toc"><li class="tocline"><a class="tocxref" href="#base"><bdi class="secno">7.1.1 </bdi>Base</a></li><li class="tocline"><a class="tocxref" href="#alias"><bdi class="secno">7.1.2 </bdi>Alias</a></li><li class="tocline"><a class="tocxref" href="#component"><bdi class="secno">7.1.3 </bdi>Component</a></li></ol></li><li class="tocline"><a class="tocxref" href="#naming-strategies"><bdi class="secno">7.2 </bdi>Naming strategies</a><ol class="toc"><li class="tocline"><a class="tocxref" href="#base-tokens"><bdi class="secno">7.2.1 </bdi>Base Tokens</a><ol class="toc"><li class="tocline"><a class="tocxref" href="#descriptive"><bdi class="secno">7.2.1.1 </bdi>Descriptive</a></li><li class="tocline"><a class="tocxref" href="#numerical"><bdi class="secno">7.2.1.2 </bdi>Numerical</a><ol class="toc"><li class="tocline"><a class="tocxref" href="#ordered-scales"><bdi class="secno">7.2.1.2.1 </bdi>Ordered scales</a></li><li class="tocline"><a class="tocxref" href="#bounded-scales"><bdi class="secno">7.2.1.2.2 </bdi>Bounded scales</a></li><li class="tocline"><a class="tocxref" href="#computer-generated-scales"><bdi class="secno">7.2.1.2.3 </bdi>Computer generated scales</a></li></ol></li></ol></li><li class="tocline"><a class="tocxref" href="#alias-tokens"><bdi class="secno">7.2.2 </bdi>Alias Tokens</a></li><li class="tocline"><a class="tocxref" href="#component-tokens"><bdi class="secno">7.2.3 </bdi>Component Tokens</a></li></ol></li></ol></li><li class="tocline"><a class="tocxref" href="#issue-summary"><bdi class="secno">A. </bdi>Issue summary</a></li><li class="tocline"><a class="tocxref" href="#references"><bdi class="secno">B. </bdi>References</a><ol class="toc"><li class="tocline"><a class="tocxref" href="#normative-references"><bdi class="secno">B.1 </bdi>Normative references</a></li></ol></li></ol></nav>

    <section id="conformance"><div class="header-wrapper"><h2 id="x1-conformance"><bdi class="secno">1. </bdi>Conformance</h2><a class="self-link" href="#conformance" aria-label="Permalink for Section 1."></a></div><p>As well as sections marked as non-normative, all authoring guidelines, diagrams, examples, and notes in this specification are non-normative. Everything else in this specification is normative.</p><p>
        The key words <em class="rfc2119">MAY</em>, <em class="rfc2119">MUST</em>, and <em class="rfc2119">MUST NOT</em> in this document
        are to be interpreted as described in
        <a href="https://www.rfc-editor.org/info/bcp14">BCP 14</a>
        [<cite><a class="bibref" data-link-type="biblio" href="#bib-rfc2119" title="Key words for use in RFCs to Indicate Requirement Levels">RFC2119</a></cite>] [<cite><a class="bibref" data-link-type="biblio" href="#bib-rfc8174" title="Ambiguity of Uppercase vs Lowercase in RFC 2119 Key Words">RFC8174</a></cite>]
        when, and only when, they appear in all
        capitals, as shown here.
      </p></section>

    <section id="introduction"><div class="header-wrapper"><h2 id="x2-introduction"><bdi class="secno">2. </bdi>Introduction</h2><a class="self-link" href="#introduction" aria-label="Permalink for Section 2."></a></div>


      <section id="color-tokens"><div class="header-wrapper"><h3 id="x2-1-color-tokens"><bdi class="secno">2.1 </bdi>Color Tokens</h3><a class="self-link" href="#color-tokens" aria-label="Permalink for Section 2.1"></a></div>
<p>Color tokens can be used to represent colors in different color spaces. Colors represented in tokens can then be converted to other color spaces by translation tools.</p>
<p>Generally speaking, this module uses <cite><a data-matched-text="[[[css-color-4]]]" href="https://www.w3.org/TR/css-color-4/">CSS Color Module Level 4</a></cite> for reference to concepts and terminology. <cite><a data-matched-text="[[[css-color-4]]]" href="https://www.w3.org/TR/css-color-4/">CSS Color Module Level 4</a></cite> is a W3C Working Draft and is not a final specification. It is subject to change and may not be implemented in all browsers or platforms.</p>
<div class="note" id="issue-container-generatedID"><div role="heading" class="ednote-title marker" id="h-ednote" aria-level="4"><span>Editor's note</span><span class="issue-label">: Why CSS Color Module Level 4?</span></div><aside class="">
<p>Color is a complex topic. <cite><a data-matched-text="[[[css-color-4]]]" href="https://www.w3.org/TR/css-color-4/">CSS Color Module Level 4</a></cite> provides a comprehensive baseline:</p>
<ul>
<li>It provides a definition of common color spaces, including gamuts and component coordinates</li>
<li>It gives technical specifications for translating colors between color spaces</li>
<li>Its authors are experts in the field of color science</li>
<li>As a spec it must reach an extremely high standard of implementability and precision</li>
</ul>
<p>Using this spec as a reference allows us to focus on the design and implementation of the tokens themselves, rather than the underlying color science.</p>
<p>It is not an endorsement of CSS as a default implementation for color tokens.</p>
</aside></div></section>
    </section>

    <section id="color-terminology"><div class="header-wrapper"><h2 id="x3-color-terminology"><bdi class="secno">3. </bdi>Color terminology</h2><a class="self-link" href="#color-terminology" aria-label="Permalink for Section 3."></a></div>
<p>This section provides a high-level overview of the terminology used in the specification and how it relates to <a href="https://en.wikipedia.org/wiki/Color_science">color science</a> and <a href="https://en.wikipedia.org/wiki/Colorimetry">colorimetry</a>.</p>
<p><dfn data-plurals="color spaces" id="dfn-color-space" tabindex="0" aria-haspopup="dialog" data-dfn-type="dfn">Color space</dfn></p>
<p>A color space is a specific organization of colors, which helps in the reproduction of color in both physical and digital realms. It defines a range of colors that can be represented and manipulated.</p>
<p><dfn id="dfn-color-model" tabindex="0" aria-haspopup="dialog" data-dfn-type="dfn">Color model</dfn></p>
<p>A color model is a mathematical representation of colors within a specific <a data-link-type="dfn|abstract-op" href="#dfn-color-space" class="internalDFN" id="ref-for-dfn-color-space-1">color space</a>. It defines how colors are represented as numerical values, typically using components.</p>
<p><dfn data-lt="gamut|Color gamut" id="dfn-gamut" tabindex="0" aria-haspopup="dialog" data-dfn-type="dfn">Color gamut</dfn></p>
<p>A color gamut is the complete range of colors that can be represented in a specific color space. It defines the limits of color reproduction for that space.</p>
<p><dfn data-lt="components|Component" id="dfn-components" tabindex="0" aria-haspopup="dialog" data-dfn-type="dfn">Component</dfn></p>
<p>A component is a single value that defines a part of a color in a specific color space. For example, in the RGB color space, the components are red, green, and blue.</p>
<p><dfn id="dfn-hue" tabindex="0" aria-haspopup="dialog" data-dfn-type="dfn">Hue</dfn></p>
<p>Hue is the attribute of a color that allows it to be classified as red, green, blue, etc. In many color spaces, hue is represented as an angle on a color wheel. Different color spaces may position colors differently on the wheel.</p>
<p><dfn id="dfn-saturation" tabindex="0" aria-haspopup="dialog" data-dfn-type="dfn">Saturation</dfn></p>
<p>Saturation is the colorfulness of a color relative to its own brightness. It describes how much gray is present in a color. A fully saturated color has no gray, while a desaturated color appears more grayish. It is inherently tied to both <a data-link-type="dfn|abstract-op" href="#dfn-chroma" class="internalDFN" id="ref-for-dfn-chroma-1">chroma</a> and <a data-link-type="dfn|abstract-op" href="#dfn-lightness" class="internalDFN" id="ref-for-dfn-lightness-1">lightness</a>, especially in models like HSL or HSV. A color can be highly saturated but still appear light or dark depending on its lightness.</p>
<p><dfn id="dfn-lightness" tabindex="0" aria-haspopup="dialog" data-dfn-type="dfn">Lightness</dfn></p>
<p>Lightness is the perceived brightness of a color. It describes how light or dark a color appears.</p>
<p><dfn id="dfn-chroma" tabindex="0" aria-haspopup="dialog" data-dfn-type="dfn">Chroma</dfn></p>
<p>Chroma refers to the colorfulness of a color relative to the brightness of a similarly illuminated white. It measures how pure or intense a color appears. In the CIE LCH color model (Lightness, Chroma, Hue), Chroma is independent of lightness and expresses how far a color is from neutral gray along the chromatic axis.</p>
<p><dfn id="dfn-alpha" tabindex="0" aria-haspopup="dialog" data-dfn-type="dfn">Alpha</dfn></p>
<p>Alpha is a component that represents the transparency of a color. It defines how opaque or transparent a color is, with the minimum value (usually 0) being fully transparent and the maximum value (usually 1) being fully opaque.</p>
</section>

    <section id="color-type"><div class="header-wrapper"><h2 id="x4-color-type"><bdi class="secno">4. </bdi>Color type</h2><a class="self-link" href="#color-type" aria-label="Permalink for Section 4."></a></div>
<p>Represents a color.</p>
<section id="format"><div class="header-wrapper"><h3 id="x4-1-format"><bdi class="secno">4.1 </bdi>Format</h3><a class="self-link" href="#format" aria-label="Permalink for Section 4.1"></a></div>
<p>For color tokens, the <code>$type</code> property <em class="rfc2119">MUST</em> be set to the string <code>color</code>.</p>
<p>The <code>$value</code> property can then be used to specify the details of the color, The <code>$value</code> object contains the following properties:</p>
<ul>
<li><code>colorSpace</code> (required): A string that specifies the <a data-link-type="dfn|abstract-op" href="#dfn-color-space" class="internalDFN" id="ref-for-dfn-color-space-2">color space</a> or <a data-link-type="dfn|abstract-op" href="#dfn-color-model" class="internalDFN" id="ref-for-dfn-color-model-1">color model</a>. For supported color spaces, see the <a href="#supported-color-spaces">supported color spaces</a> section below.</li>
<li><code>components</code> (required): An array representing the color <a data-link-type="dfn|abstract-op" href="#dfn-components" class="internalDFN" id="ref-for-dfn-components-1">components</a>. The number of components depends on the color space. Each element of the array <em class="rfc2119">MUST</em> be either:<ul>
<li>A number</li>
<li>The 'none' keyword</li>
</ul>
</li>
<li><code>alpha</code> (optional): A number that represents the <a data-link-type="dfn|abstract-op" href="#dfn-alpha" class="internalDFN" id="ref-for-dfn-alpha-1">alpha</a> value of the color. This value is between <code>0</code> and <code>1</code>, where <code>0</code> is fully transparent and <code>1</code> is fully opaque. If omitted, the alpha value of the color <em class="rfc2119">MUST</em> be assumed to be 1 (fully opaque).</li>
<li><code>hex</code> (optional): A string that represents a fallback value of the color. The fallback color <em class="rfc2119">MUST</em> be formatted in <a href="https://www.w3.org/TR/css-color-4/#hex-notation">6 digit CSS hex color notation</a> format to avoid conflicts with the provided alpha value.</li>
</ul>
<aside class="example" id="example-1"><div class="marker">
    <a class="self-link" href="#example-1">Example<bdi> 1</bdi></a>
  </div>

<pre><code class="json hljs" aria-busy="false"><span class="hljs-punctuation">{</span>
  <span class="hljs-attr">"Hot pink"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>
    <span class="hljs-attr">"$type"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"color"</span><span class="hljs-punctuation">,</span>
    <span class="hljs-attr">"$value"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>
      <span class="hljs-attr">"colorSpace"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"srgb"</span><span class="hljs-punctuation">,</span>
      <span class="hljs-attr">"components"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">[</span><span class="hljs-number">1</span><span class="hljs-punctuation">,</span> <span class="hljs-number">0</span><span class="hljs-punctuation">,</span> <span class="hljs-number">1</span><span class="hljs-punctuation">]</span><span class="hljs-punctuation">,</span>
      <span class="hljs-attr">"alpha"</span><span class="hljs-punctuation">:</span> <span class="hljs-number">1</span><span class="hljs-punctuation">,</span>
      <span class="hljs-attr">"hex"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"#ff00ff"</span>
    <span class="hljs-punctuation">}</span>
  <span class="hljs-punctuation">}</span><span class="hljs-punctuation">,</span>
  <span class="hljs-attr">"Translucent shadow"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>
    <span class="hljs-attr">"$type"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"color"</span><span class="hljs-punctuation">,</span>
    <span class="hljs-attr">"$value"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>
      <span class="hljs-attr">"colorSpace"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"srgb"</span><span class="hljs-punctuation">,</span>
      <span class="hljs-attr">"components"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">[</span><span class="hljs-number">0</span><span class="hljs-punctuation">,</span> <span class="hljs-number">0</span><span class="hljs-punctuation">,</span> <span class="hljs-number">0</span><span class="hljs-punctuation">]</span><span class="hljs-punctuation">,</span>
      <span class="hljs-attr">"alpha"</span><span class="hljs-punctuation">:</span> <span class="hljs-number">0.5</span><span class="hljs-punctuation">,</span>
      <span class="hljs-attr">"hex"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"#000000"</span>
    <span class="hljs-punctuation">}</span>
  <span class="hljs-punctuation">}</span>
<span class="hljs-punctuation">}</span>
</code></pre>
</aside>

<section id="the-none-keyword"><div class="header-wrapper"><h4 id="x4-1-1-the-none-keyword"><bdi class="secno">4.1.1 </bdi>The <code>none</code> keyword</h4><a class="self-link" href="#the-none-keyword" aria-label="Permalink for Section 4.1.1"></a></div>
<p>When specifying a color in some color spaces, a value of <code>0</code> could be ambiguous. For example, in the HSL color space, colors with a <a data-link-type="dfn|abstract-op" href="#dfn-hue" class="internalDFN" id="ref-for-dfn-hue-1">hue</a> of <code>0</code> are red; while a single color like <code>hsl(0, 0, 50)</code> would not be rendered as red, it may be treated as a completely desaturated red when interpolated with other colors. Therefore, in certain color spaces, <code>0</code> is insufficient to indicate that there is no value for a given component.</p>
<p><cite><a data-matched-text="[[[css-color-4]]]" href="https://www.w3.org/TR/css-color-4/">CSS Color Module Level 4</a></cite> has introduced the <code>none</code> keyword to indicate that a component is missing, or not applicable. For example, in the HSL color space, the <code>none</code> keyword may be used to indicate that there is no angle value for the color; a color with a hue value of <code>none</code> <em class="rfc2119">MAY</em> be rendered differently from a color with a hue angle of <code>0</code>, or result in different colors when <a href="https://www.w3.org/TR/css-color-4/#interpolation-missing">interpolating</a>.</p>
<section id="using-the-none-keyword"><div class="header-wrapper"><h5 id="x4-1-1-1-using-the-none-keyword"><bdi class="secno">4.1.1.1 </bdi>Using the <code>none</code> keyword</h5><a class="self-link" href="#using-the-none-keyword" aria-label="Permalink for Section 4.1.1.1"></a></div>
<p>The <code>none</code> keyword <em class="rfc2119">MAY</em> be used in the <code>components</code> array to indicate that a component is not applicable or not specified.</p>
<aside class="example" id="example-2"><div class="marker">
    <a class="self-link" href="#example-2">Example<bdi> 2</bdi></a>
  </div>

<pre><code class="json hljs" aria-busy="false"><span class="hljs-punctuation">{</span>
  <span class="hljs-attr">"White"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>
    <span class="hljs-attr">"$type"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"color"</span><span class="hljs-punctuation">,</span>
    <span class="hljs-attr">"$value"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>
      <span class="hljs-attr">"colorSpace"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"hsl"</span><span class="hljs-punctuation">,</span>
      <span class="hljs-attr">"components"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">[</span><span class="hljs-string">"none"</span><span class="hljs-punctuation">,</span> <span class="hljs-number">0</span><span class="hljs-punctuation">,</span> <span class="hljs-number">100</span><span class="hljs-punctuation">]</span><span class="hljs-punctuation">,</span>
      <span class="hljs-attr">"alpha"</span><span class="hljs-punctuation">:</span> <span class="hljs-number">1</span><span class="hljs-punctuation">,</span>
      <span class="hljs-attr">"hex"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"#ffffff"</span>
    <span class="hljs-punctuation">}</span>
  <span class="hljs-punctuation">}</span>
<span class="hljs-punctuation">}</span>
</code></pre>
</aside>

<p>Contrast this with the following example where the Hue is specified as <code>0</code>:</p>
<aside class="example" id="example-3"><div class="marker">
    <a class="self-link" href="#example-3">Example<bdi> 3</bdi></a>
  </div>

<pre><code class="json hljs" aria-busy="false"><span class="hljs-punctuation">{</span>
  <span class="hljs-attr">"White"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>
    <span class="hljs-attr">"$type"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"color"</span><span class="hljs-punctuation">,</span>
    <span class="hljs-attr">"$value"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>
      <span class="hljs-attr">"colorSpace"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"hsl"</span><span class="hljs-punctuation">,</span>
      <span class="hljs-attr">"components"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">[</span><span class="hljs-number">0</span><span class="hljs-punctuation">,</span> <span class="hljs-number">0</span><span class="hljs-punctuation">,</span> <span class="hljs-number">100</span><span class="hljs-punctuation">]</span><span class="hljs-punctuation">,</span>
      <span class="hljs-attr">"alpha"</span><span class="hljs-punctuation">:</span> <span class="hljs-number">1</span><span class="hljs-punctuation">,</span>
      <span class="hljs-attr">"hex"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"#ffffff"</span>
    <span class="hljs-punctuation">}</span>
  <span class="hljs-punctuation">}</span>
<span class="hljs-punctuation">}</span>
</code></pre>
</aside>

<p>While both examples will render as white, the first example is more explicit about the fact that the hue is not applicable. This is important when interpolating between colors or mixing colors, where using colors with components of <code>0</code> or <code>none</code> can yield different results.</p>
</section></section></section><section id="supported-color-spaces"><div class="header-wrapper"><h3 id="x4-2-supported-color-spaces"><bdi class="secno">4.2 </bdi>Supported Color spaces</h3><a class="self-link" href="#supported-color-spaces" aria-label="Permalink for Section 4.2"></a></div>
<p>The following values are supported for the <code>colorSpace</code> property. The <code>components</code> array will vary depending on the color space.</p>
<div class="note" id="issue-container-generatedID-0"><div role="heading" class="ednote-title marker" id="h-ednote-0" aria-level="4"><span>Editor's note</span><span class="issue-label">: Syntax for expressing ranges</span></div><aside class="">
<p>In this table, brackets <code>[]</code> indicate that an extrema are included, parentheses <code>()</code> indicate that the <a href="https://en.wikipedia.org/wiki/Maximum_and_minimum">extrema</a> are excluded. For example, in the HSL color space, hue is in the range of <a href="https://www.w3.org/TR/css-color-4/#hue-syntax">[0 - 360]</a>, which means that <code>0</code> <em class="rfc2119">MAY</em> be used but <code>360</code> <em class="rfc2119">MUST NOT</em> be used.</p>
</aside></div>

<table class="data">
    <thead>
        <tr>
            <th scope="col">Color Space</th>
            <th scope="col">Key</th>
            <th scope="col" colspan="2">Values</th>
        </tr>
    </thead>
    <tbody>

        <tr>
            <th scope="rowgroup" rowspan="3">sRGB</th>
            <td rowspan="3"><code>"srgb"</code></td>
            <td>Red</td>
            <td>[0 - 1]</td>
        </tr>
        <tr>
            <td>Green</td>
            <td>[0 - 1]</td>
        </tr>
        <tr>
            <td>Blue</td>
            <td>[0 - 1]</td>
        </tr>

        <tr>
            <th scope="rowgroup" rowspan="3">sRGB linear</th>
            <td rowspan="3"><code>"srgb-linear"</code></td>
            <td>Red</td>
            <td>[0 - 1]</td>
        </tr>
        <tr>
            <td>Green</td>
            <td>[0 - 1]</td>
        </tr>
        <tr>
            <td>Blue</td>
            <td>[0 - 1]</td>
        </tr>

        <tr>
            <th scope="rowgroup" rowspan="3">HSL</th>
            <td rowspan="3"><code>"hsl"</code></td>
            <td>Hue</td>
            <td>[0 - 360)</td>
        </tr>
        <tr>
            <td>Saturation</td>
            <td>[0 - 100]</td>
        </tr>
        <tr>
            <td>Lightness</td>
            <td>[0 - 100]</td>
        </tr>

        <tr>
            <th scope="rowgroup" rowspan="3">HWB</th>
            <td rowspan="3"><code>"hwb"</code></td>
            <td>Hue</td>
            <td>[0 - 360)</td>
        </tr>
        <tr>
            <td>Whiteness</td>
            <td>[0 - 100]</td>
        </tr>
        <tr>
            <td>Blackness</td>
            <td>[0 - 100]</td>
        </tr>

        <tr>
            <th scope="rowgroup" rowspan="3">CIELAB</th>
            <td rowspan="3"><code>"lab"</code></td>
            <td>Lightness</td>
            <td>[0 - 100]</td>
        </tr>
        <tr>
            <td>A</td>
            <td>[-Infinity - Infinity]<a href="#fn-1">*</a></td>
        </tr>
        <tr>
            <td>B</td>
            <td>[-Infinity - Infinity]<a href="#fn-1">*</a></td>
        </tr>

        <tr>
            <th scope="rowgroup" rowspan="3">LCH</th>
            <td rowspan="3"><code>"lch"</code></td>
            <td>Lightness</td>
            <td>[0 - 100]</td>
        </tr>
        <tr>
            <td>Chroma</td>
            <td>[0 - Infinity]<a href="#fn-2">**</a></td>
        </tr>
        <tr>
            <td>Hue</td>
            <td>[0 - 360)</td>
        </tr>

        <tr>
            <th scope="rowgroup" rowspan="3">OKLAB</th>
            <td rowspan="3"><code>"oklab"</code></td>
            <td>Lightness</td>
            <td>[0 - 1]</td>
        </tr>
        <tr>
            <td>A</td>
            <td>[-Infinity - Infinity]<a href="#fn-3">†</a></td>
        </tr>
        <tr>
            <td>B</td>
            <td>[-Infinity - Infinity]<a href="#fn-3">†</a></td>
        </tr>

        <tr>
            <th scope="rowgroup" rowspan="3">OKLCH</th>
            <td rowspan="3"><code>"oklch"</code></td>
            <td>Lightness</td>
            <td>[0 - 1]</td>
        </tr>
        <tr>
            <td>Chroma</td>
            <td>[0 - Infinity]<a href="#fn-4">‡</a></td>
        </tr>
        <tr>
            <td>Hue</td>
            <td>[0 - 360)</td>
        </tr>

        <tr>
            <th scope="rowgroup" rowspan="3">Display P3</th>
            <td rowspan="3"><code>"display-p3"</code></td>
            <td>Red</td>
            <td>[0 - 1]</td>
        </tr>
        <tr>
            <td>Green</td>
            <td>[0 - 1]</td>
        </tr>
        <tr>
            <td>Blue</td>
            <td>[0 - 1]</td>
        </tr>

        <tr>
            <th scope="rowgroup" rowspan="3">A98 RGB</th>
            <td rowspan="3"><code>"a98-rgb"</code></td>
            <td>Red</td>
            <td>[0 - 1]</td>
        </tr>
        <tr>
            <td>Green</td>
            <td>[0 - 1]</td>
        </tr>
        <tr>
            <td>Blue</td>
            <td>[0 - 1]</td>
        </tr>

        <tr>
            <th scope="rowgroup" rowspan="3">ProPhoto RGB</th>
            <td rowspan="3"><code>"prophoto-rgb"</code></td>
            <td>Red</td>
            <td>[0 - 1]</td>
        </tr>
        <tr>
            <td>Green</td>
            <td>[0 - 1]</td>
        </tr>
        <tr>
            <td>Blue</td>
            <td>[0 - 1]</td>
        </tr>

        <tr>
            <th scope="rowgroup" rowspan="3">Rec 2020</th>
            <td rowspan="3"><code>"rec2020"</code></td>
            <td>Red</td>
            <td>[0 - 1]</td>
        </tr>
        <tr>
            <td>Green</td>
            <td>[0 - 1]</td>
        </tr>
        <tr>
            <td>Blue</td>
            <td>[0 - 1]</td>
        </tr>

        <tr>
            <th scope="rowgroup" rowspan="3">XYZ-D65</th>
            <td rowspan="3"><code>"xyz-d65"</code></td>
            <td>X</td>
            <td>[0 - 1]</td>
        </tr>
        <tr>
            <td>Y</td>
            <td>[0 - 1]</td>
        </tr>
        <tr>
            <td>Z</td>
            <td>[0 - 1]</td>
        </tr>

        <tr>
            <th scope="rowgroup" rowspan="3">XYZ-D50</th>
            <td rowspan="3"><code>"xyz-d50"</code></td>
            <td>X</td>
            <td>[0 - 1]</td>
        </tr>
        <tr>
            <td>Y</td>
            <td>[0 - 1]</td>
        </tr>
        <tr>
            <td>Z</td>
            <td>[0 - 1]</td>
        </tr>
    </tbody>
</table>
<div>
  <span><span id="fn-1">*</span> In CIELAB, A and B are unbounded but in practice don't exceed -160 to 160</span><br>
  <span><span id="fn-2">**</span> In LCH, C is unbounded but in practice doesn't exceed 230</span><br>
  <span><span id="fn-3">†</span> In OKLAB, A and B are unbounded but in practice don't exceed -0.5 to 0.5</span><br>
  <span><span id="fn-4">‡</span> In OKLCH, Chroma is unbounded but in practice doesn't exceed 0.5</span>
</div>

<div class="note" id="issue-container-generatedID-1"><div role="heading" class="ednote-title marker" id="h-ednote-1" aria-level="4"><span>Editor's note</span><span class="issue-label">: Precision in examples</span></div><aside class="">
<p>The examples below have varying degrees of precision (i.e. numbers after the decimal). This is done to ensure that the <code>fallback</code> color is exactly the same as the defined color when converted to HEX. In practice, the numbers used to define each component can have any degree of precision.</p>
</aside></div>

<div class="note" id="issue-container-generatedID-2"><div role="heading" class="ednote-title marker" id="h-ednote-2" aria-level="4"><span>Editor's note</span><span class="issue-label">: Optional values in examples</span></div><aside class="">
<p>The examples below are given with all optional values (alpha, hex) included for the purpose of completeness. Defining the alpha property for fully-opaque colors is not required, see <a href="#format">#format</a>.</p>
</aside></div>

<div class="note" id="issue-container-generatedID-3"><div role="heading" class="ednote-title marker" id="h-ednote-3" aria-level="4"><span>Editor's note</span><span class="issue-label">: How does this conform to CSS Color Module 4?</span></div><aside class="">
<p>To provide a logically consistent approach without creating ambiguity around the format, this spec takes the following approach:</p>
<ul>
<li>If CSS Color Module 4 allows a color space to be referenced by <strong>both</strong> a named function (like <code>srgb()</code>) <strong>and</strong> a keyword in the <code>color()</code> function, use the format intended for the <code>color()</code> function.</li>
<li>If CSS Color Module 4 only defines a color space <strong>either</strong> as a named function (like <code>hwb()</code>) <strong>or</strong> a keyword in the <code>color()</code> function (like <code>rec-2020</code>), use the syntax indicated.</li>
<li>If CSS Color Module 4 allows <strong>both</strong> unit values (like <code>50</code>) <strong>and</strong> percentages (like <code>50%</code>) for a component, use the unit value.</li>
</ul>
<p>Using this spec as a reference allows us to focus on the design and implementation of the tokens themselves, rather than the underlying color science.</p>
</aside></div>

<section id="srgb"><div class="header-wrapper"><h4 id="x4-2-1-srgb"><bdi class="secno">4.2.1 </bdi>sRGB</h4><a class="self-link" href="#srgb" aria-label="Permalink for Section 4.2.1"></a></div>
<p>sRGB was the standard color space for all CSS colors before CSS Color Module 4. It is the most widely used color space on the web, and is the default color space for most design tools.</p>
<section id="components"><div class="header-wrapper"><h5 id="x4-2-1-1-components"><bdi class="secno">4.2.1.1 </bdi>Components</h5><a class="self-link" href="#components" aria-label="Permalink for Section 4.2.1.1"></a></div>
<p><code>[Red, Green, Blue]</code></p>
<ul>
<li>Red: A number between <code>0</code> and <code>1</code> representing the red component of the color.</li>
<li>Green: A number between <code>0</code> and <code>1</code> representing the green component of the color.</li>
<li>Blue: A number between <code>0</code> and <code>1</code> representing the blue component of the color.</li>
</ul>
<aside class="example" id="example-4"><div class="marker">
    <a class="self-link" href="#example-4">Example<bdi> 4</bdi></a>
  </div>

<pre><code class="json hljs" aria-busy="false"><span class="hljs-punctuation">{</span>
  <span class="hljs-attr">"Hot pink"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>
    <span class="hljs-attr">"$type"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"color"</span><span class="hljs-punctuation">,</span>
    <span class="hljs-attr">"$value"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>
      <span class="hljs-attr">"colorSpace"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"srgb"</span><span class="hljs-punctuation">,</span>
      <span class="hljs-attr">"components"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">[</span><span class="hljs-number">1</span><span class="hljs-punctuation">,</span> <span class="hljs-number">0</span><span class="hljs-punctuation">,</span> <span class="hljs-number">1</span><span class="hljs-punctuation">]</span><span class="hljs-punctuation">,</span>
      <span class="hljs-attr">"alpha"</span><span class="hljs-punctuation">:</span> <span class="hljs-number">1</span><span class="hljs-punctuation">,</span>
      <span class="hljs-attr">"hex"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"#ff00ff"</span>
    <span class="hljs-punctuation">}</span>
  <span class="hljs-punctuation">}</span>
<span class="hljs-punctuation">}</span>
</code></pre>
</aside>


<p>For more information on the sRGB color space, see <cite><a data-matched-text="[[[srgb]]]" href="https://webstore.iec.ch/publication/6169">Multimedia systems and equipment - Colour measurement and management - Part 2-1: Colour management - Default RGB colour space - sRGB</a></cite>.</p>
</section></section><section id="srgb-linear"><div class="header-wrapper"><h4 id="x4-2-2-srgb-linear"><bdi class="secno">4.2.2 </bdi>sRGB linear</h4><a class="self-link" href="#srgb-linear" aria-label="Permalink for Section 4.2.2"></a></div>
<p>sRGB linear is a linearized version of sRGB. It is used in some design tools to represent colors in a linear color space.</p>
<section id="components-0"><div class="header-wrapper"><h5 id="x4-2-2-1-components"><bdi class="secno">4.2.2.1 </bdi>Components</h5><a class="self-link" href="#components-0" aria-label="Permalink for Section 4.2.2.1"></a></div>
<p><code>[Red, Green, Blue]</code></p>
<ul>
<li>Red: A number between <code>0</code> and <code>1</code> representing the red component of the color.</li>
<li>Green: A number between <code>0</code> and <code>1</code> representing the green component of the color.</li>
<li>Blue: A number between <code>0</code> and <code>1</code> representing the blue component of the color.</li>
</ul>
<aside class="example" id="example-5"><div class="marker">
    <a class="self-link" href="#example-5">Example<bdi> 5</bdi></a>
  </div>

<pre><code class="json hljs" aria-busy="false"><span class="hljs-punctuation">{</span>
  <span class="hljs-attr">"Hot pink"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>
    <span class="hljs-attr">"$type"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"color"</span><span class="hljs-punctuation">,</span>
    <span class="hljs-attr">"$value"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>
      <span class="hljs-attr">"colorSpace"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"srgb-linear"</span><span class="hljs-punctuation">,</span>
      <span class="hljs-attr">"components"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">[</span><span class="hljs-number">1</span><span class="hljs-punctuation">,</span> <span class="hljs-number">0</span><span class="hljs-punctuation">,</span> <span class="hljs-number">1</span><span class="hljs-punctuation">]</span><span class="hljs-punctuation">,</span>
      <span class="hljs-attr">"alpha"</span><span class="hljs-punctuation">:</span> <span class="hljs-number">1</span><span class="hljs-punctuation">,</span>
      <span class="hljs-attr">"hex"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"#ff00ff"</span>
    <span class="hljs-punctuation">}</span>
  <span class="hljs-punctuation">}</span>
<span class="hljs-punctuation">}</span>
</code></pre>
</aside>

<p>For more information on the sRGB linear color space, see <cite><a data-matched-text="[[[srgb]]]" href="https://webstore.iec.ch/publication/6169">Multimedia systems and equipment - Colour measurement and management - Part 2-1: Colour management - Default RGB colour space - sRGB</a></cite>.</p>
</section></section><section id="hsl"><div class="header-wrapper"><h4 id="x4-2-3-hsl"><bdi class="secno">4.2.3 </bdi>HSL</h4><a class="self-link" href="#hsl" aria-label="Permalink for Section 4.2.3"></a></div>
<p>HSL is a <a data-link-type="dfn|abstract-op" href="#dfn-color-model" class="internalDFN" id="ref-for-dfn-color-model-2">color model</a> that is a polar transformation of sRGB, supported as early as CSS Color Level 3.</p>
<section id="components-1"><div class="header-wrapper"><h5 id="x4-2-3-1-components"><bdi class="secno">4.2.3.1 </bdi>Components</h5><a class="self-link" href="#components-1" aria-label="Permalink for Section 4.2.3.1"></a></div>
<p><code>[Hue, Saturation, Lightness]</code></p>
<ul>
<li>Hue: A number from <code>0</code> up to (but not including) <code>360</code>, but representing the <a data-link-type="dfn|abstract-op" href="#dfn-hue" class="internalDFN" id="ref-for-dfn-hue-2">hue</a> angle of the color on the color wheel.</li>
<li>Saturation: A number between <code>0</code> and <code>100</code> representing the percentage of color <a data-link-type="dfn|abstract-op" href="#dfn-saturation" class="internalDFN" id="ref-for-dfn-saturation-1">saturation</a>.</li>
<li>Lightness: A number between <code>0</code> and <code>100</code> representing the percentage of <a data-link-type="dfn|abstract-op" href="#dfn-lightness" class="internalDFN" id="ref-for-dfn-lightness-2">lightness</a>.</li>
</ul>
<aside class="example" id="example-6"><div class="marker">
    <a class="self-link" href="#example-6">Example<bdi> 6</bdi></a>
  </div>

<pre><code class="json hljs" aria-busy="false"><span class="hljs-punctuation">{</span>
  <span class="hljs-attr">"Hot pink"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>
    <span class="hljs-attr">"$type"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"color"</span><span class="hljs-punctuation">,</span>
    <span class="hljs-attr">"$value"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>
      <span class="hljs-attr">"colorSpace"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"hsl"</span><span class="hljs-punctuation">,</span>
      <span class="hljs-attr">"components"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">[</span><span class="hljs-number">330</span><span class="hljs-punctuation">,</span> <span class="hljs-number">100</span><span class="hljs-punctuation">,</span> <span class="hljs-number">50</span><span class="hljs-punctuation">]</span><span class="hljs-punctuation">,</span>
      <span class="hljs-attr">"alpha"</span><span class="hljs-punctuation">:</span> <span class="hljs-number">1</span><span class="hljs-punctuation">,</span>
      <span class="hljs-attr">"hex"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"#ff00ff"</span>
    <span class="hljs-punctuation">}</span>
  <span class="hljs-punctuation">}</span>
<span class="hljs-punctuation">}</span>
</code></pre>
</aside>

<p>For more information on the HSL color space, see <cite><a data-matched-text="[[[hsl]]]" href="http://www.cwi.nl/~steven/css/hsl.html">HSL: light vs saturation</a></cite>.</p>
</section></section><section id="hwb"><div class="header-wrapper"><h4 id="x4-2-4-hwb"><bdi class="secno">4.2.4 </bdi>HWB</h4><a class="self-link" href="#hwb" aria-label="Permalink for Section 4.2.4"></a></div>
<p>Another <a data-link-type="dfn|abstract-op" href="#dfn-color-model" class="internalDFN" id="ref-for-dfn-color-model-3">color model</a>, a polar transformation of sRGB.</p>
<section id="components-2"><div class="header-wrapper"><h5 id="x4-2-4-1-components"><bdi class="secno">4.2.4.1 </bdi>Components</h5><a class="self-link" href="#components-2" aria-label="Permalink for Section 4.2.4.1"></a></div>
<p><code>[Hue, Whiteness, Blackness]</code></p>
<ul>
<li>Hue: A number from <code>0</code> up to (but not including) <code>360</code> representing the angle of the color on the color wheel.</li>
<li>Whiteness: A number between <code>0</code> and <code>100</code> representing the percentage of white in the color.</li>
<li>Blackness: A number between <code>0</code> and <code>100</code> representing the percentage of black in the color.</li>
</ul>
<aside class="example" id="example-7"><div class="marker">
    <a class="self-link" href="#example-7">Example<bdi> 7</bdi></a>
  </div>

<pre><code class="json hljs" aria-busy="false"><span class="hljs-punctuation">{</span>
  <span class="hljs-attr">"Hot pink"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>
    <span class="hljs-attr">"$type"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"color"</span><span class="hljs-punctuation">,</span>
    <span class="hljs-attr">"$value"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>
      <span class="hljs-attr">"colorSpace"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"hwb"</span><span class="hljs-punctuation">,</span>
      <span class="hljs-attr">"components"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">[</span><span class="hljs-number">330</span><span class="hljs-punctuation">,</span> <span class="hljs-number">0</span><span class="hljs-punctuation">,</span> <span class="hljs-number">0</span><span class="hljs-punctuation">]</span><span class="hljs-punctuation">,</span>
      <span class="hljs-attr">"alpha"</span><span class="hljs-punctuation">:</span> <span class="hljs-number">1</span><span class="hljs-punctuation">,</span>
      <span class="hljs-attr">"hex"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"#ff00ff"</span>
    <span class="hljs-punctuation">}</span>
  <span class="hljs-punctuation">}</span>
<span class="hljs-punctuation">}</span>
</code></pre>
</aside>

<p>For more information on the HWB color space, see <a href="http://alvyray.com/Papers/CG/HWB_JGTv208.pdf">HWB —&nbsp;A More Intuitive Hue-Based Color Model</a>.</p>
</section></section><section id="cielab"><div class="header-wrapper"><h4 id="x4-2-5-cielab"><bdi class="secno">4.2.5 </bdi>CIELAB</h4><a class="self-link" href="#cielab" aria-label="Permalink for Section 4.2.5"></a></div>
<p>CIELAB is a color space that is designed to be perceptually uniform.</p>
<section id="components-3"><div class="header-wrapper"><h5 id="x4-2-5-1-components"><bdi class="secno">4.2.5.1 </bdi>Components</h5><a class="self-link" href="#components-3" aria-label="Permalink for Section 4.2.5.1"></a></div>
<p><code>[L, A, B]</code></p>
<ul>
<li>L: A number between <code>0</code> and <code>100</code> representing the percentage of lightness of the color.</li>
<li>A: A signed number representing the green-red axis of the color.</li>
<li>B: A signed number representing the blue-yellow axis of the color.</li>
</ul>
<p>A and B are theoretically unbounded, but in practice don't exceed -160 to 160.</p>
<aside class="example" id="example-8"><div class="marker">
    <a class="self-link" href="#example-8">Example<bdi> 8</bdi></a>
  </div>

<pre><code class="json hljs" aria-busy="false"><span class="hljs-punctuation">{</span>
  <span class="hljs-attr">"Hot pink"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>
    <span class="hljs-attr">"$type"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"color"</span><span class="hljs-punctuation">,</span>
    <span class="hljs-attr">"$value"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>
      <span class="hljs-attr">"colorSpace"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"lab"</span><span class="hljs-punctuation">,</span>
      <span class="hljs-attr">"components"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">[</span><span class="hljs-number">60.17</span><span class="hljs-punctuation">,</span> <span class="hljs-number">93.54</span><span class="hljs-punctuation">,</span> <span class="hljs-number">-60.5</span><span class="hljs-punctuation">]</span><span class="hljs-punctuation">,</span>
      <span class="hljs-attr">"alpha"</span><span class="hljs-punctuation">:</span> <span class="hljs-number">1</span><span class="hljs-punctuation">,</span>
      <span class="hljs-attr">"hex"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"#ff00ff"</span>
    <span class="hljs-punctuation">}</span>
  <span class="hljs-punctuation">}</span>
<span class="hljs-punctuation">}</span>
</code></pre>
</aside>

<p>For more information on the CIELAB color space, see <cite><a data-matched-text="[[[cielab]]]" href="http://cie.co.at/publications/colorimetry-part-4-cie-1976-lab-colour-space-1">ISO/CIE 11664-4:2019(E): Colorimetry — Part 4: CIE 1976 L*a*b* colour space</a></cite>.</p>
</section></section><section id="lch"><div class="header-wrapper"><h4 id="x4-2-6-lch"><bdi class="secno">4.2.6 </bdi>LCH</h4><a class="self-link" href="#lch" aria-label="Permalink for Section 4.2.6"></a></div>
<p>LCH is a cylindrical representation of CIELAB.</p>
<section id="components-4"><div class="header-wrapper"><h5 id="x4-2-6-1-components"><bdi class="secno">4.2.6.1 </bdi>Components</h5><a class="self-link" href="#components-4" aria-label="Permalink for Section 4.2.6.1"></a></div>
<p><code>[L, C, Hue]</code></p>
<ul>
<li>L: A number between <code>0</code> and <code>100</code> representing the percentage of lightness of the color.</li>
<li>C: A number representing the chroma of the color.</li>
<li>Hue: A number from <code>0</code> up to (but not including) <code>360</code> representing the angle of the color on the color wheel.</li>
</ul>
<p>The minimum value of C is <code>0</code>, which represents a neutral color (gray), and its maximum is theoretically unbounded, but in practice doesn't exceed 230.</p>
<aside class="example" id="example-9"><div class="marker">
    <a class="self-link" href="#example-9">Example<bdi> 9</bdi></a>
  </div>

<pre><code class="json hljs" aria-busy="false"><span class="hljs-punctuation">{</span>
  <span class="hljs-attr">"Hot pink"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>
    <span class="hljs-attr">"$type"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"color"</span><span class="hljs-punctuation">,</span>
    <span class="hljs-attr">"$value"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>
      <span class="hljs-attr">"colorSpace"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"lch"</span><span class="hljs-punctuation">,</span>
      <span class="hljs-attr">"components"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">[</span><span class="hljs-number">60.17</span><span class="hljs-punctuation">,</span> <span class="hljs-number">111.4</span><span class="hljs-punctuation">,</span> <span class="hljs-number">327.11</span><span class="hljs-punctuation">]</span><span class="hljs-punctuation">,</span>
      <span class="hljs-attr">"alpha"</span><span class="hljs-punctuation">:</span> <span class="hljs-number">1</span><span class="hljs-punctuation">,</span>
      <span class="hljs-attr">"hex"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"#ff00ff"</span>
    <span class="hljs-punctuation">}</span>
  <span class="hljs-punctuation">}</span>
<span class="hljs-punctuation">}</span>
</code></pre>
</aside>

<p>For more information on the LCH color space, see <a href="https://www.w3.org/TR/css-color-4/#cie-lab">the CIELAB and LCH section of CSS Color Module Level 4</a>.</p>
</section></section><section id="oklab"><div class="header-wrapper"><h4 id="x4-2-7-oklab"><bdi class="secno">4.2.7 </bdi>OKLAB</h4><a class="self-link" href="#oklab" aria-label="Permalink for Section 4.2.7"></a></div>
<p>OKLAB is a perceptually uniform <a data-link-type="dfn|abstract-op" href="#dfn-color-space" class="internalDFN" id="ref-for-dfn-color-space-3">color space</a> that is designed to be more accurate than CIELAB.</p>
<section id="components-5"><div class="header-wrapper"><h5 id="x4-2-7-1-components"><bdi class="secno">4.2.7.1 </bdi>Components</h5><a class="self-link" href="#components-5" aria-label="Permalink for Section 4.2.7.1"></a></div>
<p><code>[L, A, B]</code></p>
<ul>
<li>L: A number between <code>0</code> and <code>1</code> representing the lightness of the color.</li>
<li>A: A signed number representing the green-red axis of the color.</li>
<li>B: A signed number representing the blue-yellow axis of the color.</li>
</ul>
<p>Like in CIELAB, A and B are theoretically unbounded, but in practice don't exceed -0.5 to 0.5.</p>
<aside class="example" id="example-10"><div class="marker">
    <a class="self-link" href="#example-10">Example<bdi> 10</bdi></a>
  </div>

<pre><code class="json hljs" aria-busy="false"><span class="hljs-punctuation">{</span>
  <span class="hljs-attr">"Hot pink"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>
    <span class="hljs-attr">"$type"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"color"</span><span class="hljs-punctuation">,</span>
    <span class="hljs-attr">"$value"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>
      <span class="hljs-attr">"colorSpace"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"oklab"</span><span class="hljs-punctuation">,</span>
      <span class="hljs-attr">"components"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">[</span><span class="hljs-number">0.701</span><span class="hljs-punctuation">,</span> <span class="hljs-number">0.2746</span><span class="hljs-punctuation">,</span> <span class="hljs-number">-0.169</span><span class="hljs-punctuation">]</span><span class="hljs-punctuation">,</span>
      <span class="hljs-attr">"alpha"</span><span class="hljs-punctuation">:</span> <span class="hljs-number">1</span><span class="hljs-punctuation">,</span>
      <span class="hljs-attr">"hex"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"#ff00ff"</span>
    <span class="hljs-punctuation">}</span>
  <span class="hljs-punctuation">}</span>
<span class="hljs-punctuation">}</span>
</code></pre>
</aside>

<p>For more information on the OKLAB color space, see <a href="https://bottosson.github.io/posts/oklab/">OKLAB: A Perceptually Uniform Color Space</a>.</p>
</section></section><section id="oklch"><div class="header-wrapper"><h4 id="x4-2-8-oklch"><bdi class="secno">4.2.8 </bdi>OKLCH</h4><a class="self-link" href="#oklch" aria-label="Permalink for Section 4.2.8"></a></div>
<p>OKLCH is a cylindrical <a data-link-type="dfn|abstract-op" href="#dfn-color-model" class="internalDFN" id="ref-for-dfn-color-model-4">color model</a> of OKLAB.</p>
<section id="components-6"><div class="header-wrapper"><h5 id="x4-2-8-1-components"><bdi class="secno">4.2.8.1 </bdi>Components</h5><a class="self-link" href="#components-6" aria-label="Permalink for Section 4.2.8.1"></a></div>
<p><code>[L, Chroma, Hue]</code></p>
<ul>
<li>L: A number between <code>0</code> and <code>1</code> representing the lightness of the color.</li>
<li>Chroma: A number representing the chroma of the color.</li>
<li>Hue: A number from <code>0</code> up to (but not including) <code>360</code> representing the angle of the color on the color wheel.</li>
</ul>
<p>Like in LCH, the minimum value of Chroma is <code>0</code>, which represents a neutral color (gray), and its maximum is theoretically unbounded, but in practice doesn't exceed 0.5.</p>
<aside class="example" id="example-11"><div class="marker">
    <a class="self-link" href="#example-11">Example<bdi> 11</bdi></a>
  </div>

<pre><code class="json hljs" aria-busy="false"><span class="hljs-punctuation">{</span>
  <span class="hljs-attr">"Hot pink"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>
    <span class="hljs-attr">"$type"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"color"</span><span class="hljs-punctuation">,</span>
    <span class="hljs-attr">"$value"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>
      <span class="hljs-attr">"colorSpace"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"oklch"</span><span class="hljs-punctuation">,</span>
      <span class="hljs-attr">"components"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">[</span><span class="hljs-number">0.7016</span><span class="hljs-punctuation">,</span> <span class="hljs-number">0.3225</span><span class="hljs-punctuation">,</span> <span class="hljs-number">328.363</span><span class="hljs-punctuation">]</span><span class="hljs-punctuation">,</span>
      <span class="hljs-attr">"alpha"</span><span class="hljs-punctuation">:</span> <span class="hljs-number">1</span><span class="hljs-punctuation">,</span>
      <span class="hljs-attr">"hex"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"#ff00ff"</span>
    <span class="hljs-punctuation">}</span>
  <span class="hljs-punctuation">}</span>
<span class="hljs-punctuation">}</span>
</code></pre>
</aside>

<p>For more information on the OKLCH color space, see <a href="https://bottosson.github.io/posts/oklab/">OKLAB: A Perceptually Uniform Color Space</a>.</p>
</section></section><section id="display-p3"><div class="header-wrapper"><h4 id="x4-2-9-display-p3"><bdi class="secno">4.2.9 </bdi>Display P3</h4><a class="self-link" href="#display-p3" aria-label="Permalink for Section 4.2.9"></a></div>
<p>Display P3 is a <a data-link-type="dfn|abstract-op" href="#dfn-color-space" class="internalDFN" id="ref-for-dfn-color-space-4">color space</a> that is designed to be used in displays with a wide color <a data-link-type="dfn|abstract-op" href="#dfn-gamut" class="internalDFN" id="ref-for-dfn-gamut-1">gamut</a>. It is based on the P3 color space used in digital cinema.</p>
<section id="components-7"><div class="header-wrapper"><h5 id="x4-2-9-1-components"><bdi class="secno">4.2.9.1 </bdi>Components</h5><a class="self-link" href="#components-7" aria-label="Permalink for Section 4.2.9.1"></a></div>
<p><code>[Red, Green, Blue]</code></p>
<ul>
<li>Red: A number between <code>0</code> and <code>1</code> representing the red component of the color.</li>
<li>Green: A number between <code>0</code> and <code>1</code> representing the green component of the color.</li>
<li>Blue: A number between <code>0</code> and <code>1</code> representing the blue component of the color.</li>
</ul>
<aside class="example" id="example-12"><div class="marker">
    <a class="self-link" href="#example-12">Example<bdi> 12</bdi></a>
  </div>

<pre><code class="json hljs" aria-busy="false"><span class="hljs-punctuation">{</span>
  <span class="hljs-attr">"Hot pink"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>
    <span class="hljs-attr">"$type"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"color"</span><span class="hljs-punctuation">,</span>
    <span class="hljs-attr">"$value"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>
      <span class="hljs-attr">"colorSpace"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"display-p3"</span><span class="hljs-punctuation">,</span>
      <span class="hljs-attr">"components"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">[</span><span class="hljs-number">1</span><span class="hljs-punctuation">,</span> <span class="hljs-number">0</span><span class="hljs-punctuation">,</span> <span class="hljs-number">1</span><span class="hljs-punctuation">]</span><span class="hljs-punctuation">,</span>
      <span class="hljs-attr">"alpha"</span><span class="hljs-punctuation">:</span> <span class="hljs-number">1</span><span class="hljs-punctuation">,</span>
      <span class="hljs-attr">"hex"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"#ff00ff"</span>
    <span class="hljs-punctuation">}</span>
  <span class="hljs-punctuation">}</span>
<span class="hljs-punctuation">}</span>
</code></pre>
</aside>

<p>For more information on the Display P3 color space, see <a href="https://www.color.org/chardata/rgb/DisplayP3.xalter">the definition of Display P3</a>.</p>
</section></section><section id="a98-rgb"><div class="header-wrapper"><h4 id="x4-2-10-a98-rgb"><bdi class="secno">4.2.10 </bdi>A98 RGB</h4><a class="self-link" href="#a98-rgb" aria-label="Permalink for Section 4.2.10"></a></div>
<p>A98 RGB is a color space that is designed to be used in displays with a wide color gamut. It is based on the Adobe RGB color space.</p>
<section id="components-8"><div class="header-wrapper"><h5 id="x4-2-10-1-components"><bdi class="secno">4.2.10.1 </bdi>Components</h5><a class="self-link" href="#components-8" aria-label="Permalink for Section 4.2.10.1"></a></div>
<p><code>[Red, Green, Blue]</code></p>
<ul>
<li>Red: A number between <code>0</code> and <code>1</code> representing the red component of the color.</li>
<li>Green: A number between <code>0</code> and <code>1</code> representing the green component of the color.</li>
<li>Blue: A number between <code>0</code> and <code>1</code> representing the blue component of the color.</li>
</ul>
<aside class="example" id="example-13"><div class="marker">
    <a class="self-link" href="#example-13">Example<bdi> 13</bdi></a>
  </div>

<pre><code class="json hljs" aria-busy="false"><span class="hljs-punctuation">{</span>
  <span class="hljs-attr">"Hot pink"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>
    <span class="hljs-attr">"$type"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"color"</span><span class="hljs-punctuation">,</span>
    <span class="hljs-attr">"$value"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>
      <span class="hljs-attr">"colorSpace"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"a98-rgb"</span><span class="hljs-punctuation">,</span>
      <span class="hljs-attr">"components"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">[</span><span class="hljs-number">1</span><span class="hljs-punctuation">,</span> <span class="hljs-number">0</span><span class="hljs-punctuation">,</span> <span class="hljs-number">1</span><span class="hljs-punctuation">]</span><span class="hljs-punctuation">,</span>
      <span class="hljs-attr">"alpha"</span><span class="hljs-punctuation">:</span> <span class="hljs-number">1</span><span class="hljs-punctuation">,</span>
      <span class="hljs-attr">"hex"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"#ff00ff"</span>
    <span class="hljs-punctuation">}</span>
  <span class="hljs-punctuation">}</span>
<span class="hljs-punctuation">}</span>
</code></pre>
</aside>

<p>To learn more about the A98 color space, see the <a href="https://en.wikipedia.org/wiki/Adobe_RGB_color_space">Adobe RGB color space article on Wikipedia</a>.</p>
</section></section><section id="prophoto-rgb"><div class="header-wrapper"><h4 id="x4-2-11-prophoto-rgb"><bdi class="secno">4.2.11 </bdi>ProPhoto RGB</h4><a class="self-link" href="#prophoto-rgb" aria-label="Permalink for Section 4.2.11"></a></div>
<p>ProPhoto RGB is a color space that is designed to be used in displays with a wide color gamut. It is based on the ProPhoto RGB color space.</p>
<section id="components-9"><div class="header-wrapper"><h5 id="x4-2-11-1-components"><bdi class="secno">4.2.11.1 </bdi>Components</h5><a class="self-link" href="#components-9" aria-label="Permalink for Section 4.2.11.1"></a></div>
<p><code>[Red, Green, Blue]</code></p>
<ul>
<li>Red: A number between <code>0</code> and <code>1</code> representing the red component of the color.</li>
<li>Green: A number between <code>0</code> and <code>1</code> representing the green component of the color.</li>
<li>Blue: A number between <code>0</code> and <code>1</code> representing the blue component of the color.</li>
</ul>
<aside class="example" id="example-14"><div class="marker">
    <a class="self-link" href="#example-14">Example<bdi> 14</bdi></a>
  </div>

<pre><code class="json hljs" aria-busy="false"><span class="hljs-punctuation">{</span>
  <span class="hljs-attr">"Hot pink"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>
    <span class="hljs-attr">"$type"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"color"</span><span class="hljs-punctuation">,</span>
    <span class="hljs-attr">"$value"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>
      <span class="hljs-attr">"colorSpace"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"prophoto-rgb"</span><span class="hljs-punctuation">,</span>
      <span class="hljs-attr">"components"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">[</span><span class="hljs-number">1</span><span class="hljs-punctuation">,</span> <span class="hljs-number">0</span><span class="hljs-punctuation">,</span> <span class="hljs-number">1</span><span class="hljs-punctuation">]</span><span class="hljs-punctuation">,</span>
      <span class="hljs-attr">"alpha"</span><span class="hljs-punctuation">:</span> <span class="hljs-number">1</span><span class="hljs-punctuation">,</span>
      <span class="hljs-attr">"hex"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"#ff00ff"</span>
    <span class="hljs-punctuation">}</span>
  <span class="hljs-punctuation">}</span>
<span class="hljs-punctuation">}</span>
</code></pre>
</aside>

<p>For more information on the ProPhoto RGB color space, see <a href="https://www.realtimerendering.com/blog/2011-color-and-imaging-conference-part-vi-special-session/">Design and Optimization of the ProPhoto RGB Color Encodings
</a>.</p>
</section></section><section id="rec-2020"><div class="header-wrapper"><h4 id="x4-2-12-rec-2020"><bdi class="secno">4.2.12 </bdi>Rec 2020</h4><a class="self-link" href="#rec-2020" aria-label="Permalink for Section 4.2.12"></a></div>
<p>Rec 2020 is a color space that is designed to be used in displays with a wide color gamut. It is based on the Rec 2020 color space.</p>
<section id="components-10"><div class="header-wrapper"><h5 id="x4-2-12-1-components"><bdi class="secno">4.2.12.1 </bdi>Components</h5><a class="self-link" href="#components-10" aria-label="Permalink for Section 4.2.12.1"></a></div>
<p><code>[Red, Green, Blue]</code></p>
<ul>
<li>Red: A number between <code>0</code> and <code>1</code> representing the red component of the color.</li>
<li>Green: A number between <code>0</code> and <code>1</code> representing the green component of the color.</li>
<li>Blue: A number between <code>0</code> and <code>1</code> representing the blue component of the color.</li>
</ul>
<aside class="example" id="example-15"><div class="marker">
    <a class="self-link" href="#example-15">Example<bdi> 15</bdi></a>
  </div>

<pre><code class="json hljs" aria-busy="false"><span class="hljs-punctuation">{</span>
  <span class="hljs-attr">"Hot pink"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>
    <span class="hljs-attr">"$type"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"color"</span><span class="hljs-punctuation">,</span>
    <span class="hljs-attr">"$value"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>
      <span class="hljs-attr">"colorSpace"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"rec2020"</span><span class="hljs-punctuation">,</span>
      <span class="hljs-attr">"components"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">[</span><span class="hljs-number">1</span><span class="hljs-punctuation">,</span> <span class="hljs-number">0</span><span class="hljs-punctuation">,</span> <span class="hljs-number">1</span><span class="hljs-punctuation">]</span><span class="hljs-punctuation">,</span>
      <span class="hljs-attr">"alpha"</span><span class="hljs-punctuation">:</span> <span class="hljs-number">1</span><span class="hljs-punctuation">,</span>
      <span class="hljs-attr">"hex"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"#ff00ff"</span>
    <span class="hljs-punctuation">}</span>
  <span class="hljs-punctuation">}</span>
<span class="hljs-punctuation">}</span>
</code></pre>
</aside>

<p>For more information on the Rec 2020 color space, see <cite><a data-matched-text="[[[Rec.2020]]]" href="http://www.itu.int/rec/R-REC-BT.2020/en">Recommendation  ITU-R  BT.2020-2:  Parameter values for ultra-high definition television systems for production and international programme exchange </a></cite>.</p>
</section></section><section id="xyz-d65"><div class="header-wrapper"><h4 id="x4-2-13-xyz-d65"><bdi class="secno">4.2.13 </bdi>XYZ-D65</h4><a class="self-link" href="#xyz-d65" aria-label="Permalink for Section 4.2.13"></a></div>
<p>XYZ-D65 is a color space that is designed to be able to represent all colors that can be perceived by the human eye. It is a fundamental color space — all other spaces can be converted to and from XYZ. It is based on the CIE 1931 color space, using the D65 illuminant. XYZ is not commonly used in design tools, but is useful for color conversions.</p>
<section id="components-11"><div class="header-wrapper"><h5 id="x4-2-13-1-components"><bdi class="secno">4.2.13.1 </bdi>Components</h5><a class="self-link" href="#components-11" aria-label="Permalink for Section 4.2.13.1"></a></div>
<p><code>[X, Y, Z]</code></p>
<ul>
<li>X: A number between <code>0</code> and <code>1</code> representing the X component of the color.</li>
<li>Y: A number between <code>0</code> and <code>1</code> representing the Y component of the color.</li>
<li>Z: A number between <code>0</code> and <code>1</code> representing the Z component of the color.</li>
</ul>
<aside class="example" id="example-16"><div class="marker">
    <a class="self-link" href="#example-16">Example<bdi> 16</bdi></a>
  </div>

<pre><code class="json hljs" aria-busy="false"><span class="hljs-punctuation">{</span>
  <span class="hljs-attr">"Hot pink"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>
    <span class="hljs-attr">"$type"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"color"</span><span class="hljs-punctuation">,</span>
    <span class="hljs-attr">"$value"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>
      <span class="hljs-attr">"colorSpace"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"xyz-d65"</span><span class="hljs-punctuation">,</span>
      <span class="hljs-attr">"components"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">[</span><span class="hljs-number">0.5929</span><span class="hljs-punctuation">,</span> <span class="hljs-number">0.2848</span><span class="hljs-punctuation">,</span> <span class="hljs-number">0.9699</span><span class="hljs-punctuation">]</span><span class="hljs-punctuation">,</span>
      <span class="hljs-attr">"alpha"</span><span class="hljs-punctuation">:</span> <span class="hljs-number">1</span><span class="hljs-punctuation">,</span>
      <span class="hljs-attr">"hex"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"#ff00ff"</span>
    <span class="hljs-punctuation">}</span>
  <span class="hljs-punctuation">}</span>
<span class="hljs-punctuation">}</span>
</code></pre>
</aside>

<p>For more information on the XYZ-D65 color space, see <cite><a data-matched-text="[[[COLORIMETRY]]]" href="http://www.cie.co.at/publications/colorimetry-4th-edition">Colorimetry, Fourth Edition. CIE 015:2018</a></cite>.</p>
</section></section><section id="xyz-d50"><div class="header-wrapper"><h4 id="x4-2-14-xyz-d50"><bdi class="secno">4.2.14 </bdi>XYZ-D50</h4><a class="self-link" href="#xyz-d50" aria-label="Permalink for Section 4.2.14"></a></div>
<p>XYZ-D50 is similar to XYZ-D65, but uses the D50 illuminant.</p>
<section id="components-12"><div class="header-wrapper"><h5 id="x4-2-14-1-components"><bdi class="secno">4.2.14.1 </bdi>Components</h5><a class="self-link" href="#components-12" aria-label="Permalink for Section 4.2.14.1"></a></div>
<p><code>[X, Y, Z]</code></p>
<ul>
<li>X: A number between <code>0</code> and <code>1</code> representing the X component of the color.</li>
<li>Y: A number between <code>0</code> and <code>1</code> representing the Y component of the color.</li>
<li>Z: A number between <code>0</code> and <code>1</code> representing the Z component of the color.</li>
</ul>
<aside class="example" id="example-17"><div class="marker">
    <a class="self-link" href="#example-17">Example<bdi> 17</bdi></a>
  </div>

<pre><code class="json hljs" aria-busy="false"><span class="hljs-punctuation">{</span>
  <span class="hljs-attr">"Hot pink"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>
    <span class="hljs-attr">"$type"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"color"</span><span class="hljs-punctuation">,</span>
    <span class="hljs-attr">"$value"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>
      <span class="hljs-attr">"colorSpace"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"xyz-d50"</span><span class="hljs-punctuation">,</span>
      <span class="hljs-attr">"components"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">[</span><span class="hljs-number">0.5791</span><span class="hljs-punctuation">,</span> <span class="hljs-number">0.2831</span><span class="hljs-punctuation">,</span> <span class="hljs-number">0.728</span><span class="hljs-punctuation">]</span><span class="hljs-punctuation">,</span>
      <span class="hljs-attr">"alpha"</span><span class="hljs-punctuation">:</span> <span class="hljs-number">1</span><span class="hljs-punctuation">,</span>
      <span class="hljs-attr">"hex"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"#ff00ff"</span>
    <span class="hljs-punctuation">}</span>
  <span class="hljs-punctuation">}</span>
<span class="hljs-punctuation">}</span>
</code></pre>
</aside>

<p>For more information on the XYZ-D50 color space, see <cite><a data-matched-text="[[[COLORIMETRY]]]" href="http://www.cie.co.at/publications/colorimetry-4th-edition">Colorimetry, Fourth Edition. CIE 015:2018</a></cite>.</p>
</section></section></section><section id="future-color-space-support"><div class="header-wrapper"><h3 id="x4-3-future-color-space-support"><bdi class="secno">4.3 </bdi>Future color space support</h3><a class="self-link" href="#future-color-space-support" aria-label="Permalink for Section 4.3"></a></div>
<p>Future versions of this spec may add support for additional color spaces, depending on adoption and support in design tools.</p>
</section></section>

    <section class="informative" id="gamut-mapping"><div class="header-wrapper"><h2 id="x5-gamut-mapping"><bdi class="secno">5. </bdi>Gamut mapping</h2><a class="self-link" href="#gamut-mapping" aria-label="Permalink for Section 5."></a></div><p><em>This section is non-normative.</em></p>
<p>Gamut mapping is the process of converting colors from one <a data-link-type="dfn|abstract-op" href="#dfn-color-space" class="internalDFN" id="ref-for-dfn-color-space-5">color space</a> to another.</p>
<p>Gamut mapping is necessary when the source color space has a larger gamut than the target color space. This can happen when converting colors from a wide-gamut color space (like Display-P3) to a smaller gamut color space (like sRGB). Gamut mapping ensures that the colors are represented accurately in the target color space, even if some colors cannot be represented exactly.</p>
<p>When transforming colors, translation tools <em class="rfc2119">MAY</em> use the gamut mapping algorithm that best fits the use case. For example, if the goal is to preserve the appearance of colors, a perceptual gamut mapping algorithm may be used. If the goal is to preserve the exact color values, a saturation or relative colorimetric gamut mapping algorithm may be used.</p>
<p>Token authors should be aware that the choice of gamut mapping algorithm can significantly affect the appearance of colors in the target color space. If colors need to be transformed between color spaces, it's important to validate the output of the translation tool to ensure that the colors are represented accurately and consistently.</p>
</section>

    <section class="informative" id="interpolation"><div class="header-wrapper"><h2 id="x6-interpolation"><bdi class="secno">6. </bdi>Interpolation</h2><a class="self-link" href="#interpolation" aria-label="Permalink for Section 6."></a></div><p><em>This section is non-normative.</em></p>
<p>In many cases, colors may be <em>interpolated</em>, or blended, to create new colors. For example, when creating a gradient, colors are often interpolated between two or more key colors.</p>
<p>Interpolation can be done in different <a data-link-type="dfn|abstract-op" href="#dfn-color-space" class="internalDFN" id="ref-for-dfn-color-space-6">color spaces</a>, and the choice of color space can affect the appearance of the resulting colors. Translation tools <em class="rfc2119">MAY</em> use different interpolation methods depending on the color space and the desired effect. Authors should be aware of the implications of interpolation in different color spaces and validate interpolated colors to ensure they meet design requirements.</p>
</section>

    <section class="informative" id="token-naming"><div class="header-wrapper"><h2 id="x7-token-naming"><bdi class="secno">7. </bdi>Token naming</h2><a class="self-link" href="#token-naming" aria-label="Permalink for Section 7."></a></div><p><em>This section is non-normative.</em></p>
<section id="categorization"><div class="header-wrapper"><h3 id="x7-1-categorization"><bdi class="secno">7.1 </bdi>Categorization</h3><a class="self-link" href="#categorization" aria-label="Permalink for Section 7.1"></a></div>
<p>There are 3 main categories of design tokens that we will continue to reference in this specification.</p>
<section id="base"><div class="header-wrapper"><h4 id="x7-1-1-base"><bdi class="secno">7.1.1 </bdi>Base</h4><a class="self-link" href="#base" aria-label="Permalink for Section 7.1.1"></a></div>
<p>Base tokens are the lowest level tokens.</p>
<aside class="example" id="example-18"><div class="marker">
    <a class="self-link" href="#example-18">Example<bdi> 18</bdi></a>
  </div>

<pre><code class="json hljs" aria-busy="false"><span class="hljs-punctuation">{</span>
  <span class="hljs-attr">"color"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>
    <span class="hljs-attr">"green"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>
      <span class="hljs-attr">"$type"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"color"</span><span class="hljs-punctuation">,</span>
      <span class="hljs-attr">"$value"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>
        <span class="hljs-attr">"colorSpace"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"srgb"</span><span class="hljs-punctuation">,</span>
        <span class="hljs-attr">"components"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">[</span><span class="hljs-number">0.67</span><span class="hljs-punctuation">,</span> <span class="hljs-number">0.79</span><span class="hljs-punctuation">,</span> <span class="hljs-number">0.74</span><span class="hljs-punctuation">]</span>
      <span class="hljs-punctuation">}</span>
    <span class="hljs-punctuation">}</span><span class="hljs-punctuation">,</span>
    <span class="hljs-attr">"shadow"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>
      <span class="hljs-attr">"$type"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"color"</span><span class="hljs-punctuation">,</span>
      <span class="hljs-attr">"$value"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>
        <span class="hljs-attr">"colorSpace"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"srgb"</span><span class="hljs-punctuation">,</span>
        <span class="hljs-attr">"components"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">[</span><span class="hljs-number">0</span><span class="hljs-punctuation">,</span> <span class="hljs-number">0</span><span class="hljs-punctuation">,</span> <span class="hljs-number">0</span><span class="hljs-punctuation">]</span><span class="hljs-punctuation">,</span>
        <span class="hljs-attr">"alpha"</span><span class="hljs-punctuation">:</span> <span class="hljs-number">0.53</span>
      <span class="hljs-punctuation">}</span>
    <span class="hljs-punctuation">}</span>
  <span class="hljs-punctuation">}</span>
<span class="hljs-punctuation">}</span>
</code></pre>
</aside>

</section><section id="alias"><div class="header-wrapper"><h4 id="x7-1-2-alias"><bdi class="secno">7.1.2 </bdi>Alias</h4><a class="self-link" href="#alias" aria-label="Permalink for Section 7.1.2"></a></div>
<p>A design token’s value <em class="rfc2119">MAY</em> be a <em>reference</em> to another token. The same value <em class="rfc2119">MAY</em> have multiple names or aliases.</p>
<aside class="example" id="example-19"><div class="marker">
    <a class="self-link" href="#example-19">Example<bdi> 19</bdi></a>
  </div>

<pre><code class="json hljs" aria-busy="false"><span class="hljs-punctuation">{</span>
  <span class="hljs-attr">"color"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>
    <span class="hljs-attr">"palette"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>
      <span class="hljs-attr">"black"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>
        <span class="hljs-attr">"$type"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"color"</span><span class="hljs-punctuation">,</span>
        <span class="hljs-attr">"$value"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>
          <span class="hljs-attr">"colorSpace"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"srgb"</span><span class="hljs-punctuation">,</span>
          <span class="hljs-attr">"components"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">[</span><span class="hljs-number">0</span><span class="hljs-punctuation">,</span> <span class="hljs-number">0</span><span class="hljs-punctuation">,</span> <span class="hljs-number">0</span><span class="hljs-punctuation">]</span>
        <span class="hljs-punctuation">}</span>
      <span class="hljs-punctuation">}</span>
    <span class="hljs-punctuation">}</span><span class="hljs-punctuation">,</span>
    <span class="hljs-attr">"text"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>
      <span class="hljs-attr">"base"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>
        <span class="hljs-attr">"$value"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"{color.palette.black}"</span>
      <span class="hljs-punctuation">}</span>
    <span class="hljs-punctuation">}</span>
  <span class="hljs-punctuation">}</span>
<span class="hljs-punctuation">}</span>
</code></pre>
</aside>

</section><section id="component"><div class="header-wrapper"><h4 id="x7-1-3-component"><bdi class="secno">7.1.3 </bdi>Component</h4><a class="self-link" href="#component" aria-label="Permalink for Section 7.1.3"></a></div>
<p>Component-specific tokens provide design decisions at the component level and improve the separation of concerns in your token architecture.</p>
<aside class="example" id="example-20"><div class="marker">
    <a class="self-link" href="#example-20">Example<bdi> 20</bdi></a>
  </div>

<pre><code class="json hljs" aria-busy="false"><span class="hljs-punctuation">{</span>
  <span class="hljs-attr">"color"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>
    <span class="hljs-attr">"button"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>
      <span class="hljs-attr">"primary"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>
        <span class="hljs-attr">"$value"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"{color.brand.primary}"</span>
      <span class="hljs-punctuation">}</span>
    <span class="hljs-punctuation">}</span><span class="hljs-punctuation">,</span>
    <span class="hljs-attr">"banner"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>
      <span class="hljs-attr">"background"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>
        <span class="hljs-attr">"$value"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"{color.palette.black}"</span>
      <span class="hljs-punctuation">}</span>
    <span class="hljs-punctuation">}</span>
  <span class="hljs-punctuation">}</span>
<span class="hljs-punctuation">}</span>
</code></pre>
</aside>

</section></section><section id="naming-strategies"><div class="header-wrapper"><h3 id="x7-2-naming-strategies"><bdi class="secno">7.2 </bdi>Naming strategies</h3><a class="self-link" href="#naming-strategies" aria-label="Permalink for Section 7.2"></a></div>
<p>There are many naming options when it comes to design tokens, especially color type tokens. We’ve identified two that seem to be most commonly implemented, <strong>descriptive and numerical</strong>.</p>
<section id="base-tokens"><div class="header-wrapper"><h4 id="x7-2-1-base-tokens"><bdi class="secno">7.2.1 </bdi>Base Tokens</h4><a class="self-link" href="#base-tokens" aria-label="Permalink for Section 7.2.1"></a></div>
<p>For <strong>Base tokens</strong>, here’s how they <em class="rfc2119">MAY</em> be represented in each version:</p>
<section id="descriptive"><div class="header-wrapper"><h5 id="x7-2-1-1-descriptive"><bdi class="secno">7.2.1.1 </bdi>Descriptive</h5><a class="self-link" href="#descriptive" aria-label="Permalink for Section 7.2.1.1"></a></div>
<p>Descriptive names can be more emotional and human-friendly because they often relate to tangible things that people interact with, like grass or watermelon.</p>
<table>
<thead>
<tr>
<th>Pros</th>
<th>Cons</th>
</tr>
</thead>
<tbody><tr>
<td>Easier for some people to identify with, could be used to distinguish brand colors from product colors</td>
<td>Harder to determine the scale of colors (for example: which ones are lighter vs. darker? How well do they pair together?)</td>
</tr>
<tr>
<td></td>
<td>Names may not be easily recognized by non-English speakers. For teams working across languages, this may not be a good choice</td>
</tr>
</tbody></table>
<aside class="example" id="example-21"><div class="marker">
    <a class="self-link" href="#example-21">Example<bdi> 21</bdi></a>
  </div>

<pre><code class="json hljs" aria-busy="false"><span class="hljs-punctuation">{</span>
  <span class="hljs-attr">"color"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>
    <span class="hljs-attr">"grass"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>
      <span class="hljs-attr">"$type"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"color"</span><span class="hljs-punctuation">,</span>
      <span class="hljs-attr">"$value"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>
        <span class="hljs-attr">"colorSpace"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"srgb"</span><span class="hljs-punctuation">,</span>
        <span class="hljs-attr">"components"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">[</span><span class="hljs-number">0.67</span><span class="hljs-punctuation">,</span> <span class="hljs-number">0.79</span><span class="hljs-punctuation">,</span> <span class="hljs-number">0.74</span><span class="hljs-punctuation">]</span>
      <span class="hljs-punctuation">}</span>
    <span class="hljs-punctuation">}</span><span class="hljs-punctuation">,</span>
    <span class="hljs-attr">"brand"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>
      <span class="hljs-attr">"watermelon"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>
        <span class="hljs-attr">"$type"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"color"</span><span class="hljs-punctuation">,</span>
        <span class="hljs-attr">"$value"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>
          <span class="hljs-attr">"colorSpace"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"srgb"</span><span class="hljs-punctuation">,</span>
          <span class="hljs-attr">"components"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">[</span><span class="hljs-number">0.91</span><span class="hljs-punctuation">,</span> <span class="hljs-number">0.28</span><span class="hljs-punctuation">,</span> <span class="hljs-number">0.42</span><span class="hljs-punctuation">]</span>
        <span class="hljs-punctuation">}</span>
      <span class="hljs-punctuation">}</span>
    <span class="hljs-punctuation">}</span>
  <span class="hljs-punctuation">}</span>
<span class="hljs-punctuation">}</span>
</code></pre>
</aside>

</section><section id="numerical"><div class="header-wrapper"><h5 id="x7-2-1-2-numerical"><bdi class="secno">7.2.1.2 </bdi>Numerical</h5><a class="self-link" href="#numerical" aria-label="Permalink for Section 7.2.1.2"></a></div>
<section id="ordered-scales"><div class="header-wrapper"><h6 id="x7-2-1-2-1-ordered-scales"><bdi class="secno">7.2.1.2.1 </bdi>Ordered scales</h6><a class="self-link" href="#ordered-scales" aria-label="Permalink for Section 7.2.1.2.1"></a></div>
<p>Numerical tokens often follow a scale to help delineate how the colors progress. For example, when using an ordered scale, <code>color.blue.500</code> may be the base color, where the lightest color value is <code>color.blue.100</code>, and the darkest value could be <code>color.blue.900</code>, and these values are ordered in increments of 100s in between. We recommend not using sequential numbers (ex: 1, 2, 3, 4) for scalability in case future colors need to be added in between two existing colors.</p>
<aside class="example" id="example-22"><div class="marker">
    <a class="self-link" href="#example-22">Example<bdi> 22</bdi></a>
  </div>

<pre><code class="json hljs" aria-busy="false"><span class="hljs-punctuation">{</span>
  <span class="hljs-attr">"color"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>
    <span class="hljs-attr">"green"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>
      <span class="hljs-attr">"400"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>
        <span class="hljs-attr">"$type"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"color"</span><span class="hljs-punctuation">,</span>
        <span class="hljs-attr">"$value"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>
          <span class="hljs-attr">"colorSpace"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"srgb"</span><span class="hljs-punctuation">,</span>
          <span class="hljs-attr">"components"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">[</span><span class="hljs-number">0.42</span><span class="hljs-punctuation">,</span> <span class="hljs-number">0.73</span><span class="hljs-punctuation">,</span> <span class="hljs-number">0.63</span><span class="hljs-punctuation">]</span>
        <span class="hljs-punctuation">}</span>
      <span class="hljs-punctuation">}</span><span class="hljs-punctuation">,</span>
      <span class="hljs-attr">"500"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>
        <span class="hljs-attr">"$type"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"color"</span><span class="hljs-punctuation">,</span>
        <span class="hljs-attr">"$value"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>
          <span class="hljs-attr">"colorSpace"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"srgb"</span><span class="hljs-punctuation">,</span>
          <span class="hljs-attr">"components"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">[</span><span class="hljs-number">0.15</span><span class="hljs-punctuation">,</span> <span class="hljs-number">0.56</span><span class="hljs-punctuation">,</span> <span class="hljs-number">0.42</span><span class="hljs-punctuation">]</span>
        <span class="hljs-punctuation">}</span>
      <span class="hljs-punctuation">}</span><span class="hljs-punctuation">,</span>
      <span class="hljs-attr">"600"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>
        <span class="hljs-attr">"$type"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"color"</span><span class="hljs-punctuation">,</span>
        <span class="hljs-attr">"$value"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>
          <span class="hljs-attr">"colorSpace"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"srgb"</span><span class="hljs-punctuation">,</span>
          <span class="hljs-attr">"components"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">[</span><span class="hljs-number">0.07</span><span class="hljs-punctuation">,</span> <span class="hljs-number">0.5</span><span class="hljs-punctuation">,</span> <span class="hljs-number">0.36</span><span class="hljs-punctuation">]</span>
        <span class="hljs-punctuation">}</span>
      <span class="hljs-punctuation">}</span>
    <span class="hljs-punctuation">}</span>
  <span class="hljs-punctuation">}</span>
<span class="hljs-punctuation">}</span>
</code></pre>
</aside>

<p>Numerical token names can also allow for further specificity when needed. For example, when creating neutral palette tokens (like grays), the scale may increase by increments of 25 instead of 100 at the lightest values, and then increment by 100 thereafter.</p>
<aside class="example" id="example-23"><div class="marker">
    <a class="self-link" href="#example-23">Example<bdi> 23</bdi></a>
  </div>

<pre><code class="jsonc hljs" aria-busy="false"><span class="hljs-punctuation">{</span>
  <span class="hljs-attr">"color"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>
    <span class="hljs-attr">"gray"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>
      <span class="hljs-attr">"25"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>
        <span class="hljs-attr">"$type"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"color"</span><span class="hljs-punctuation">,</span>
        <span class="hljs-attr">"$value"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>
          <span class="hljs-attr">"colorSpace"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"srgb"</span><span class="hljs-punctuation">,</span>
          <span class="hljs-attr">"components"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">[</span><span class="hljs-number">0.93</span><span class="hljs-punctuation">,</span> <span class="hljs-number">0.93</span><span class="hljs-punctuation">,</span> <span class="hljs-number">0.93</span><span class="hljs-punctuation">]</span><span class="hljs-punctuation">,</span>
        <span class="hljs-punctuation">}</span><span class="hljs-punctuation">,</span>
      <span class="hljs-punctuation">}</span><span class="hljs-punctuation">,</span>
      <span class="hljs-attr">"50"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>
        <span class="hljs-attr">"$type"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"color"</span><span class="hljs-punctuation">,</span>
        <span class="hljs-attr">"$value"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>
          <span class="hljs-attr">"colorSpace"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"srgb"</span><span class="hljs-punctuation">,</span>
          <span class="hljs-attr">"components"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">[</span><span class="hljs-number">0.87</span><span class="hljs-punctuation">,</span> <span class="hljs-number">0.87</span><span class="hljs-punctuation">,</span> <span class="hljs-number">0.87</span><span class="hljs-punctuation">]</span><span class="hljs-punctuation">,</span>
        <span class="hljs-punctuation">}</span><span class="hljs-punctuation">,</span>
      <span class="hljs-punctuation">}</span><span class="hljs-punctuation">,</span>
      <span class="hljs-attr">"75"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>
        <span class="hljs-attr">"$type"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"color"</span><span class="hljs-punctuation">,</span>
        <span class="hljs-attr">"$value"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>
          <span class="hljs-attr">"colorSpace"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"srgb"</span><span class="hljs-punctuation">,</span>
          <span class="hljs-attr">"components"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">[</span><span class="hljs-number">0.8</span><span class="hljs-punctuation">,</span> <span class="hljs-number">0.8</span><span class="hljs-punctuation">,</span> <span class="hljs-number">0.8</span><span class="hljs-punctuation">]</span><span class="hljs-punctuation">,</span>
        <span class="hljs-punctuation">}</span><span class="hljs-punctuation">,</span>
      <span class="hljs-punctuation">}</span><span class="hljs-punctuation">,</span>
      <span class="hljs-attr">"100"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>
        <span class="hljs-attr">"$type"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"color"</span><span class="hljs-punctuation">,</span>
        <span class="hljs-attr">"$value"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>
          <span class="hljs-attr">"colorSpace"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"srgb"</span><span class="hljs-punctuation">,</span>
          <span class="hljs-attr">"components"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">[</span><span class="hljs-number">0.73</span><span class="hljs-punctuation">,</span> <span class="hljs-number">0.73</span><span class="hljs-punctuation">,</span> <span class="hljs-number">0.73</span><span class="hljs-punctuation">]</span><span class="hljs-punctuation">,</span>
        <span class="hljs-punctuation">}</span><span class="hljs-punctuation">,</span>
      <span class="hljs-punctuation">}</span><span class="hljs-punctuation">,</span>
      <span class="hljs-comment">// etc...</span>
    <span class="hljs-punctuation">}</span><span class="hljs-punctuation">,</span>
  <span class="hljs-punctuation">}</span><span class="hljs-punctuation">,</span>
<span class="hljs-punctuation">}</span>
</code></pre>
</aside>

</section><section id="bounded-scales"><div class="header-wrapper"><h6 id="x7-2-1-2-2-bounded-scales"><bdi class="secno">7.2.1.2.2 </bdi>Bounded scales</h6><a class="self-link" href="#bounded-scales" aria-label="Permalink for Section 7.2.1.2.2"></a></div>
<p>Numerical tokens can also be named through <strong>bounded scales</strong>. These tokens utilize a distinguishing value based on the actual color used for the token, such as in HSL’s lightness value to vary shades of a tint.</p>
<aside class="example" id="example-24"><div class="marker">
    <a class="self-link" href="#example-24">Example<bdi> 24</bdi></a>
  </div>

<pre><code class="json hljs" aria-busy="false"><span class="hljs-punctuation">{</span>
  <span class="hljs-attr">"color"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>
    <span class="hljs-attr">"gray"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>
      <span class="hljs-attr">"22"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>
        <span class="hljs-attr">"$type"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"color"</span><span class="hljs-punctuation">,</span>
        <span class="hljs-attr">"$value"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>
          <span class="hljs-attr">"colorSpace"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"hsl"</span><span class="hljs-punctuation">,</span>
          <span class="hljs-attr">"components"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">[</span><span class="hljs-number">0</span><span class="hljs-punctuation">,</span> <span class="hljs-number">0</span><span class="hljs-punctuation">,</span> <span class="hljs-number">22</span><span class="hljs-punctuation">]</span>
        <span class="hljs-punctuation">}</span>
      <span class="hljs-punctuation">}</span><span class="hljs-punctuation">,</span>
      <span class="hljs-attr">"49"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>
        <span class="hljs-attr">"$type"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"color"</span><span class="hljs-punctuation">,</span>
        <span class="hljs-attr">"$value"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>
          <span class="hljs-attr">"colorSpace"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"hsl"</span><span class="hljs-punctuation">,</span>
          <span class="hljs-attr">"components"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">[</span><span class="hljs-number">0</span><span class="hljs-punctuation">,</span> <span class="hljs-number">0</span><span class="hljs-punctuation">,</span> <span class="hljs-number">49</span><span class="hljs-punctuation">]</span>
        <span class="hljs-punctuation">}</span>
      <span class="hljs-punctuation">}</span><span class="hljs-punctuation">,</span>
      <span class="hljs-attr">"73"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>
        <span class="hljs-attr">"$type"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"color"</span><span class="hljs-punctuation">,</span>
        <span class="hljs-attr">"$value"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>
          <span class="hljs-attr">"colorSpace"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"hsl"</span><span class="hljs-punctuation">,</span>
          <span class="hljs-attr">"components"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">[</span><span class="hljs-number">0</span><span class="hljs-punctuation">,</span> <span class="hljs-number">0</span><span class="hljs-punctuation">,</span> <span class="hljs-number">73</span><span class="hljs-punctuation">]</span>
        <span class="hljs-punctuation">}</span>
      <span class="hljs-punctuation">}</span><span class="hljs-punctuation">,</span>
      <span class="hljs-attr">"99"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>
        <span class="hljs-attr">"$type"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"color"</span><span class="hljs-punctuation">,</span>
        <span class="hljs-attr">"$value"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>
          <span class="hljs-attr">"colorSpace"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"hsl"</span><span class="hljs-punctuation">,</span>
          <span class="hljs-attr">"components"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">[</span><span class="hljs-number">0</span><span class="hljs-punctuation">,</span> <span class="hljs-number">0</span><span class="hljs-punctuation">,</span> <span class="hljs-number">99</span><span class="hljs-punctuation">]</span>
        <span class="hljs-punctuation">}</span>
      <span class="hljs-punctuation">}</span>
    <span class="hljs-punctuation">}</span>
  <span class="hljs-punctuation">}</span>
<span class="hljs-punctuation">}</span>
</code></pre>
</aside>

</section><section id="computer-generated-scales"><div class="header-wrapper"><h6 id="x7-2-1-2-3-computer-generated-scales"><bdi class="secno">7.2.1.2.3 </bdi>Computer generated scales</h6><a class="self-link" href="#computer-generated-scales" aria-label="Permalink for Section 7.2.1.2.3"></a></div>
<p>Token names <em class="rfc2119">MAY</em> also be generated by tools, where the user specifies the base name, and the tool appends scale numbers based on changes to the underlying value.</p>
<aside class="example" id="example-25"><div class="marker">
    <a class="self-link" href="#example-25">Example<bdi> 25</bdi></a>
  </div>

<pre><code class="jsonc hljs" aria-busy="false"><span class="hljs-comment">// User specified name: color-green</span>
<span class="hljs-comment">// Tool generated names for 6 steps of opacity</span>
<span class="hljs-punctuation">{</span>
  <span class="hljs-attr">"color"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>
    <span class="hljs-attr">"green"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>
      <span class="hljs-attr">"10"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>
        <span class="hljs-attr">"$type"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"color"</span><span class="hljs-punctuation">,</span>
        <span class="hljs-attr">"$value"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>
          <span class="hljs-attr">"colorSpace"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"srgb"</span><span class="hljs-punctuation">,</span>
          <span class="hljs-attr">"components"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">[</span><span class="hljs-number">0.13</span><span class="hljs-punctuation">,</span> <span class="hljs-number">0.7</span><span class="hljs-punctuation">,</span> <span class="hljs-number">0.67</span><span class="hljs-punctuation">]</span><span class="hljs-punctuation">,</span>
          <span class="hljs-attr">"alpha"</span><span class="hljs-punctuation">:</span> <span class="hljs-number">0.1</span><span class="hljs-punctuation">,</span>
        <span class="hljs-punctuation">}</span><span class="hljs-punctuation">,</span>
      <span class="hljs-punctuation">}</span><span class="hljs-punctuation">,</span>
      <span class="hljs-attr">"20"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>
        <span class="hljs-attr">"$type"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"color"</span><span class="hljs-punctuation">,</span>
        <span class="hljs-attr">"$value"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>
          <span class="hljs-attr">"colorSpace"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"srgb"</span><span class="hljs-punctuation">,</span>
          <span class="hljs-attr">"components"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">[</span><span class="hljs-number">0.13</span><span class="hljs-punctuation">,</span> <span class="hljs-number">0.7</span><span class="hljs-punctuation">,</span> <span class="hljs-number">0.67</span><span class="hljs-punctuation">]</span><span class="hljs-punctuation">,</span>
          <span class="hljs-attr">"alpha"</span><span class="hljs-punctuation">:</span> <span class="hljs-number">0.2</span><span class="hljs-punctuation">,</span>
        <span class="hljs-punctuation">}</span><span class="hljs-punctuation">,</span>
      <span class="hljs-punctuation">}</span><span class="hljs-punctuation">,</span>
      <span class="hljs-comment">// etc...</span>
    <span class="hljs-punctuation">}</span><span class="hljs-punctuation">,</span>
  <span class="hljs-punctuation">}</span><span class="hljs-punctuation">,</span>
<span class="hljs-punctuation">}</span>
</code></pre>
</aside>

<table>
<thead>
<tr>
<th>Pros</th>
<th>Cons</th>
</tr>
</thead>
<tbody><tr>
<td>Easy mapping between different tokens for color contrast. For example, all 100-400 tokens pair with 500-900 tokens in order to create accessible color combinations.</td>
<td>Less memorable and less obvious difference between tokens</td>
</tr>
<tr>
<td>If using bounded scales, the token name can help indicate something about the underlying value</td>
<td></td>
</tr>
</tbody></table>
</section></section></section><section id="alias-tokens"><div class="header-wrapper"><h4 id="x7-2-2-alias-tokens"><bdi class="secno">7.2.2 </bdi>Alias Tokens</h4><a class="self-link" href="#alias-tokens" aria-label="Permalink for Section 7.2.2"></a></div>
<p>For <strong>Alias Tokens</strong>, we recommend grouping tokens with similar intentions by prioritizing the category + property within the name. For example, all background color Alias tokens would likely start with <code>color.background.XXX</code>.</p>
<p>We recommend avoiding abbreviations. For example, use “background” instead of “bg”, to help with clarity.</p>
<p>Here’s how alias tokens may be represented:</p>
<aside class="example" id="example-26"><div class="marker">
    <a class="self-link" href="#example-26">Example<bdi> 26</bdi></a>
  </div>

<pre><code class="json hljs" aria-busy="false"><span class="hljs-punctuation">{</span>
  <span class="hljs-attr">"color"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>
    <span class="hljs-attr">"background"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>
      <span class="hljs-attr">"error"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>
        <span class="hljs-attr">"$value"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"{color.red.600}"</span>
      <span class="hljs-punctuation">}</span><span class="hljs-punctuation">,</span>
      <span class="hljs-attr">"success"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>
        <span class="hljs-attr">"$value"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"{color.green.400}"</span>
      <span class="hljs-punctuation">}</span>
    <span class="hljs-punctuation">}</span><span class="hljs-punctuation">,</span>
    <span class="hljs-attr">"text"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>
      <span class="hljs-attr">"base"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>
        <span class="hljs-attr">"$value"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"{color.palette.black}"</span>
      <span class="hljs-punctuation">}</span><span class="hljs-punctuation">,</span>
      <span class="hljs-attr">"errorHover"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>
        <span class="hljs-attr">"$value"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"{color.red.700}"</span>
      <span class="hljs-punctuation">}</span>
    <span class="hljs-punctuation">}</span>
  <span class="hljs-punctuation">}</span>
<span class="hljs-punctuation">}</span>
</code></pre>
</aside>

<p>Color alias tokens could also be grouped by concept, like so:</p>
<aside class="example" id="example-27"><div class="marker">
    <a class="self-link" href="#example-27">Example<bdi> 27</bdi></a>
  </div>

<pre><code class="jsonc hljs" aria-busy="false"><span class="hljs-comment">// These can be used for background, border, or text colors</span>
<span class="hljs-punctuation">{</span>
  <span class="hljs-attr">"color"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>
    <span class="hljs-attr">"background"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>
      <span class="hljs-attr">"error"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>
        <span class="hljs-attr">"$value"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"{color.red.600}"</span><span class="hljs-punctuation">,</span>
      <span class="hljs-punctuation">}</span><span class="hljs-punctuation">,</span>
      <span class="hljs-attr">"success"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>
        <span class="hljs-attr">"$value"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"{color.green.400}"</span><span class="hljs-punctuation">,</span>
      <span class="hljs-punctuation">}</span><span class="hljs-punctuation">,</span>
    <span class="hljs-punctuation">}</span><span class="hljs-punctuation">,</span>
  <span class="hljs-punctuation">}</span><span class="hljs-punctuation">,</span>
<span class="hljs-punctuation">}</span>
</code></pre>
</aside>

</section><section id="component-tokens"><div class="header-wrapper"><h4 id="x7-2-3-component-tokens"><bdi class="secno">7.2.3 </bdi>Component Tokens</h4><a class="self-link" href="#component-tokens" aria-label="Permalink for Section 7.2.3"></a></div>
<p>Component-specific names should start with the component they support and be located close to the component code. They commonly refer to alias tokens and can be helpful when trying to use consistent styles across components while still maintaining separation of concerns.</p>
<aside class="example" id="example-28"><div class="marker">
    <a class="self-link" href="#example-28">Example<bdi> 28</bdi></a>
  </div>

<pre><code class="json hljs" aria-busy="false"><span class="hljs-punctuation">{</span>
  <span class="hljs-attr">"color"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>
    <span class="hljs-attr">"badge"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>
      <span class="hljs-attr">"background"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>
        <span class="hljs-attr">"error"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>
          <span class="hljs-attr">"$value"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"{color.background.error}"</span>
        <span class="hljs-punctuation">}</span><span class="hljs-punctuation">,</span>
        <span class="hljs-attr">"success"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>
          <span class="hljs-attr">"$value"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"{color.background.success}"</span>
        <span class="hljs-punctuation">}</span>
      <span class="hljs-punctuation">}</span><span class="hljs-punctuation">,</span>
      <span class="hljs-attr">"text"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>
        <span class="hljs-attr">"error"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>
          <span class="hljs-attr">"$value"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"{color.text.error}"</span>
        <span class="hljs-punctuation">}</span><span class="hljs-punctuation">,</span>
        <span class="hljs-attr">"success"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>
          <span class="hljs-attr">"$value"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"{color.text.success}"</span>
        <span class="hljs-punctuation">}</span>
      <span class="hljs-punctuation">}</span>
    <span class="hljs-punctuation">}</span>
  <span class="hljs-punctuation">}</span>
<span class="hljs-punctuation">}</span>
</code></pre>
</aside></section></section></section>

    <section class="appendix" id="issue-summary"><div class="header-wrapper"><h2 id="a-issue-summary"><bdi class="secno">A. </bdi>Issue summary</h2><a class="self-link" href="#issue-summary" aria-label="Permalink for Appendix A."></a></div><p>There are no issues listed in this specification.</p></section>


<section id="references" class="appendix"><div class="header-wrapper"><h2 id="b-references"><bdi class="secno">B. </bdi>References</h2><a class="self-link" href="#references" aria-label="Permalink for Appendix B."></a></div><section id="normative-references"><div class="header-wrapper"><h3 id="b-1-normative-references"><bdi class="secno">B.1 </bdi>Normative references</h3><a class="self-link" href="#normative-references" aria-label="Permalink for Appendix B.1"></a></div>

    <dl class="bibliography"><dt id="bib-cielab">[cielab]</dt><dd>
      <a href="http://cie.co.at/publications/colorimetry-part-4-cie-1976-lab-colour-space-1"><cite>ISO/CIE 11664-4:2019(E): Colorimetry — Part 4: CIE 1976 L*a*b* colour space</cite></a>.  International Organization for Standardization (ISO), International Commission on Illumination (CIE). 2019. Published. URL: <a href="http://cie.co.at/publications/colorimetry-part-4-cie-1976-lab-colour-space-1">http://cie.co.at/publications/colorimetry-part-4-cie-1976-lab-colour-space-1</a>
    </dd><dt id="bib-colorimetry">[COLORIMETRY]</dt><dd>
      <a href="http://www.cie.co.at/publications/colorimetry-4th-edition"><cite>Colorimetry, Fourth Edition. CIE 015:2018</cite></a>.  CIE. 2018. URL: <a href="http://www.cie.co.at/publications/colorimetry-4th-edition">http://www.cie.co.at/publications/colorimetry-4th-edition</a>
    </dd><dt id="bib-css-color-4">[css-color-4]</dt><dd>
      <a href="https://www.w3.org/TR/css-color-4/"><cite>CSS Color Module Level 4</cite></a>. Chris Lilley; Tab Atkins Jr.; Lea Verou.  W3C. 24 April 2025. CRD. URL: <a href="https://www.w3.org/TR/css-color-4/">https://www.w3.org/TR/css-color-4/</a>
    </dd><dt id="bib-hsl">[hsl]</dt><dd>
      <a href="http://www.cwi.nl/~steven/css/hsl.html"><cite>HSL: light vs saturation</cite></a>. Steven Pemberton. 19 November 2009. URL: <a href="http://www.cwi.nl/~steven/css/hsl.html">http://www.cwi.nl/~steven/css/hsl.html</a>
    </dd><dt id="bib-rec.2020">[Rec.2020]</dt><dd>
      <a href="http://www.itu.int/rec/R-REC-BT.2020/en"><cite>Recommendation  ITU-R  BT.2020-2:  Parameter values for ultra-high definition television systems for production and international programme exchange </cite></a>.  ITU. October 2015. URL: <a href="http://www.itu.int/rec/R-REC-BT.2020/en">http://www.itu.int/rec/R-REC-BT.2020/en</a>
    </dd><dt id="bib-rfc2119">[RFC2119]</dt><dd>
      <a href="https://www.rfc-editor.org/rfc/rfc2119"><cite>Key words for use in RFCs to Indicate Requirement Levels</cite></a>. S. Bradner.  IETF. March 1997. Best Current Practice. URL: <a href="https://www.rfc-editor.org/rfc/rfc2119">https://www.rfc-editor.org/rfc/rfc2119</a>
    </dd><dt id="bib-rfc8174">[RFC8174]</dt><dd>
      <a href="https://www.rfc-editor.org/rfc/rfc8174"><cite>Ambiguity of Uppercase vs Lowercase in RFC 2119 Key Words</cite></a>. B. Leiba.  IETF. May 2017. Best Current Practice. URL: <a href="https://www.rfc-editor.org/rfc/rfc8174">https://www.rfc-editor.org/rfc/rfc8174</a>
    </dd><dt id="bib-srgb">[srgb]</dt><dd>
      <a href="https://webstore.iec.ch/publication/6169"><cite>Multimedia systems and equipment - Colour measurement and management - Part 2-1: Colour management - Default RGB colour space - sRGB</cite></a>.  IEC. URL: <a href="https://webstore.iec.ch/publication/6169">https://webstore.iec.ch/publication/6169</a>
    </dd></dl>
  </section></section><p role="navigation" id="back-to-top">
    <a href="#title"><abbr title="Back to Top">↑</abbr></a>
  </p><div class="dfn-panel" hidden="" role="dialog" aria-modal="true" id="dfn-panel-for-dfn-color-space" aria-label="Links in this document to definition: Color space">
      <span class="caret"></span>
      <div>
        <a class="self-link" href="#dfn-color-space" aria-label="Permalink for definition: Color space. Activate to close this dialog.">Permalink</a>

      </div>
      <p><b>Referenced in:</b></p>
      <ul>
    <li>
      <a href="#ref-for-dfn-color-space-1" title="§ 3. Color terminology">§ 3. Color terminology</a>
    </li><li>
      <a href="#ref-for-dfn-color-space-2" title="§ 4.1 Format">§ 4.1 Format</a>
    </li><li>
      <a href="#ref-for-dfn-color-space-3" title="§ 4.2.7 OKLAB">§ 4.2.7 OKLAB</a>
    </li><li>
      <a href="#ref-for-dfn-color-space-4" title="§ 4.2.9 Display P3">§ 4.2.9 Display P3</a>
    </li><li>
      <a href="#ref-for-dfn-color-space-5" title="§ 5. Gamut mapping">§ 5. Gamut mapping</a>
    </li><li>
      <a href="#ref-for-dfn-color-space-6" title="§ 6. Interpolation">§ 6. Interpolation</a>
    </li>
  </ul>
    </div><div class="dfn-panel" hidden="" role="dialog" aria-modal="true" id="dfn-panel-for-dfn-color-model" aria-label="Links in this document to definition: Color model">
      <span class="caret"></span>
      <div>
        <a class="self-link" href="#dfn-color-model" aria-label="Permalink for definition: Color model. Activate to close this dialog.">Permalink</a>

      </div>
      <p><b>Referenced in:</b></p>
      <ul>
    <li>
      <a href="#ref-for-dfn-color-model-1" title="§ 4.1 Format">§ 4.1 Format</a>
    </li><li>
      <a href="#ref-for-dfn-color-model-2" title="§ 4.2.3 HSL">§ 4.2.3 HSL</a>
    </li><li>
      <a href="#ref-for-dfn-color-model-3" title="§ 4.2.4 HWB">§ 4.2.4 HWB</a>
    </li><li>
      <a href="#ref-for-dfn-color-model-4" title="§ 4.2.8 OKLCH">§ 4.2.8 OKLCH</a>
    </li>
  </ul>
    </div><div class="dfn-panel" hidden="" role="dialog" aria-modal="true" id="dfn-panel-for-dfn-gamut" aria-label="Links in this document to definition: Color gamut">
      <span class="caret"></span>
      <div>
        <a class="self-link" href="#dfn-gamut" aria-label="Permalink for definition: Color gamut. Activate to close this dialog.">Permalink</a>

      </div>
      <p><b>Referenced in:</b></p>
      <ul>
    <li>
      <a href="#ref-for-dfn-gamut-1" title="§ 4.2.9 Display P3">§ 4.2.9 Display P3</a>
    </li>
  </ul>
    </div><div class="dfn-panel" hidden="" role="dialog" aria-modal="true" id="dfn-panel-for-dfn-components" aria-label="Links in this document to definition: Component">
      <span class="caret"></span>
      <div>
        <a class="self-link" href="#dfn-components" aria-label="Permalink for definition: Component. Activate to close this dialog.">Permalink</a>

      </div>
      <p><b>Referenced in:</b></p>
      <ul>
    <li>
      <a href="#ref-for-dfn-components-1" title="§ 4.1 Format">§ 4.1 Format</a>
    </li>
  </ul>
    </div><div class="dfn-panel" hidden="" role="dialog" aria-modal="true" id="dfn-panel-for-dfn-hue" aria-label="Links in this document to definition: Hue">
      <span class="caret"></span>
      <div>
        <a class="self-link" href="#dfn-hue" aria-label="Permalink for definition: Hue. Activate to close this dialog.">Permalink</a>

      </div>
      <p><b>Referenced in:</b></p>
      <ul>
    <li>
      <a href="#ref-for-dfn-hue-1" title="§ 4.1.1 The none keyword">§ 4.1.1 The none keyword</a>
    </li><li>
      <a href="#ref-for-dfn-hue-2" title="§ 4.2.3.1 Components">§ 4.2.3.1 Components</a>
    </li>
  </ul>
    </div><div class="dfn-panel" hidden="" role="dialog" aria-modal="true" id="dfn-panel-for-dfn-saturation" aria-label="Links in this document to definition: Saturation">
      <span class="caret"></span>
      <div>
        <a class="self-link" href="#dfn-saturation" aria-label="Permalink for definition: Saturation. Activate to close this dialog.">Permalink</a>

      </div>
      <p><b>Referenced in:</b></p>
      <ul>
    <li>
      <a href="#ref-for-dfn-saturation-1" title="§ 4.2.3.1 Components">§ 4.2.3.1 Components</a>
    </li>
  </ul>
    </div><div class="dfn-panel" hidden="" role="dialog" aria-modal="true" id="dfn-panel-for-dfn-lightness" aria-label="Links in this document to definition: Lightness">
      <span class="caret"></span>
      <div>
        <a class="self-link" href="#dfn-lightness" aria-label="Permalink for definition: Lightness. Activate to close this dialog.">Permalink</a>

      </div>
      <p><b>Referenced in:</b></p>
      <ul>
    <li>
      <a href="#ref-for-dfn-lightness-1" title="§ 3. Color terminology">§ 3. Color terminology</a>
    </li><li>
      <a href="#ref-for-dfn-lightness-2" title="§ 4.2.3.1 Components">§ 4.2.3.1 Components</a>
    </li>
  </ul>
    </div><div class="dfn-panel" hidden="" role="dialog" aria-modal="true" id="dfn-panel-for-dfn-chroma" aria-label="Links in this document to definition: Chroma">
      <span class="caret"></span>
      <div>
        <a class="self-link" href="#dfn-chroma" aria-label="Permalink for definition: Chroma. Activate to close this dialog.">Permalink</a>

      </div>
      <p><b>Referenced in:</b></p>
      <ul>
    <li>
      <a href="#ref-for-dfn-chroma-1" title="§ 3. Color terminology">§ 3. Color terminology</a>
    </li>
  </ul>
    </div><div class="dfn-panel" hidden="" role="dialog" aria-modal="true" id="dfn-panel-for-dfn-alpha" aria-label="Links in this document to definition: Alpha">
      <span class="caret"></span>
      <div>
        <a class="self-link" href="#dfn-alpha" aria-label="Permalink for definition: Alpha. Activate to close this dialog.">Permalink</a>

      </div>
      <p><b>Referenced in:</b></p>
      <ul>
    <li>
      <a href="#ref-for-dfn-alpha-1" title="§ 4.1 Format">§ 4.1 Format</a>
    </li>
  </ul>
    </div><script id="respec-highlight-vars">(() => {
// @ts-check

if (document.respec) {
  document.respec.ready.then(setupVarHighlighter);
} else {
  setupVarHighlighter();
}

function setupVarHighlighter() {
  document
    .querySelectorAll("var")
    .forEach(varElem => varElem.addEventListener("click", highlightListener));
}

function highlightListener(ev) {
  ev.stopPropagation();
  const { target: varElem } = ev;
  const hightligtedElems = highlightVars(varElem);
  const resetListener = () => {
    const hlColor = getHighlightColor(varElem);
    hightligtedElems.forEach(el => removeHighlight(el, hlColor));
    [...HL_COLORS.keys()].forEach(key => HL_COLORS.set(key, true));
  };
  if (hightligtedElems.length) {
    document.body.addEventListener("click", resetListener, { once: true });
  }
}

// availability of highlight colors. colors from var.css
const HL_COLORS = new Map([
  ["respec-hl-c1", true],
  ["respec-hl-c2", true],
  ["respec-hl-c3", true],
  ["respec-hl-c4", true],
  ["respec-hl-c5", true],
  ["respec-hl-c6", true],
  ["respec-hl-c7", true],
]);

function getHighlightColor(target) {
  // return current colors if applicable
  const { value } = target.classList;
  const re = /respec-hl-\w+/;
  const activeClass = re.test(value) && value.match(re);
  if (activeClass) return activeClass[0];

  // first color preference
  if (HL_COLORS.get("respec-hl-c1") === true) return "respec-hl-c1";

  // otherwise get some other available color
  return [...HL_COLORS.keys()].find(c => HL_COLORS.get(c)) || "respec-hl-c1";
}

function highlightVars(varElem) {
  const textContent = norm(varElem.textContent);
  const parent = varElem.closest(".algorithm, section");
  const highlightColor = getHighlightColor(varElem);

  const varsToHighlight = [...parent.querySelectorAll("var")].filter(
    el =>
      norm(el.textContent) === textContent &&
      el.closest(".algorithm, section") === parent
  );

  // update availability of highlight color
  const colorStatus = varsToHighlight[0].classList.contains("respec-hl");
  HL_COLORS.set(highlightColor, colorStatus);

  // highlight vars
  if (colorStatus) {
    varsToHighlight.forEach(el => removeHighlight(el, highlightColor));
    return [];
  } else {
    varsToHighlight.forEach(el => addHighlight(el, highlightColor));
  }
  return varsToHighlight;
}

function removeHighlight(el, highlightColor) {
  el.classList.remove("respec-hl", highlightColor);
  // clean up empty class attributes so they don't come in export
  if (!el.classList.length) el.removeAttribute("class");
}

function addHighlight(elem, highlightColor) {
  elem.classList.add("respec-hl", highlightColor);
}

/**
 * Same as `norm` from src/core/utils, but our build process doesn't allow
 * imports in runtime scripts, so duplicated here.
 * @param {string} str
 */
function norm(str) {
  return str.trim().replace(/\s+/g, " ");
}
})()</script><script id="respec-dfn-panel">(() => {
// @ts-check
if (document.respec) {
  document.respec.ready.then(setupPanel);
} else {
  setupPanel();
}

function setupPanel() {
  const listener = panelListener();
  document.body.addEventListener("keydown", listener);
  document.body.addEventListener("click", listener);
}

function panelListener() {
  /** @type {HTMLElement} */
  let panel = null;
  return event => {
    const { target, type } = event;

    if (!(target instanceof HTMLElement)) return;

    // For keys, we only care about Enter key to activate the panel
    // otherwise it's activated via a click.
    if (type === "keydown" && event.key !== "Enter") return;

    const action = deriveAction(event);

    switch (action) {
      case "show": {
        hidePanel(panel);
        /** @type {HTMLElement} */
        const dfn = target.closest("dfn, .index-term");
        panel = document.getElementById(`dfn-panel-for-${dfn.id}`);
        const coords = deriveCoordinates(event);
        displayPanel(dfn, panel, coords);
        break;
      }
      case "dock": {
        panel.style.left = null;
        panel.style.top = null;
        panel.classList.add("docked");
        break;
      }
      case "hide": {
        hidePanel(panel);
        panel = null;
        break;
      }
    }
  };
}

/**
 * @param {MouseEvent|KeyboardEvent} event
 */
function deriveCoordinates(event) {
  const target = /** @type HTMLElement */ (event.target);

  // We prevent synthetic AT clicks from putting
  // the dialog in a weird place. The AT events sometimes
  // lack coordinates, so they have clientX/Y = 0
  const rect = target.getBoundingClientRect();
  if (
    event instanceof MouseEvent &&
    event.clientX >= rect.left &&
    event.clientY >= rect.top
  ) {
    // The event probably happened inside the bounding rect...
    return { x: event.clientX, y: event.clientY };
  }

  // Offset to the middle of the element
  const x = rect.x + rect.width / 2;
  // Placed at the bottom of the element
  const y = rect.y + rect.height;
  return { x, y };
}

/**
 * @param {Event} event
 */
function deriveAction(event) {
  const target = /** @type {HTMLElement} */ (event.target);
  const hitALink = !!target.closest("a");
  if (target.closest("dfn:not([data-cite]), .index-term")) {
    return hitALink ? "none" : "show";
  }
  if (target.closest(".dfn-panel")) {
    if (hitALink) {
      return target.classList.contains("self-link") ? "hide" : "dock";
    }
    const panel = target.closest(".dfn-panel");
    return panel.classList.contains("docked") ? "hide" : "none";
  }
  if (document.querySelector(".dfn-panel:not([hidden])")) {
    return "hide";
  }
  return "none";
}

/**
 * @param {HTMLElement} dfn
 * @param {HTMLElement} panel
 * @param {{ x: number, y: number }} clickPosition
 */
function displayPanel(dfn, panel, { x, y }) {
  panel.hidden = false;
  // distance (px) between edge of panel and the pointing triangle (caret)
  const MARGIN = 20;

  const dfnRects = dfn.getClientRects();
  // Find the `top` offset when the `dfn` can be spread across multiple lines
  let closestTop = 0;
  let minDiff = Infinity;
  for (const rect of dfnRects) {
    const { top, bottom } = rect;
    const diffFromClickY = Math.abs((top + bottom) / 2 - y);
    if (diffFromClickY < minDiff) {
      minDiff = diffFromClickY;
      closestTop = top;
    }
  }

  const top = window.scrollY + closestTop + dfnRects[0].height;
  const left = x - MARGIN;
  panel.style.left = `${left}px`;
  panel.style.top = `${top}px`;

  // Find if the panel is flowing out of the window
  const panelRect = panel.getBoundingClientRect();
  const SCREEN_WIDTH = Math.min(window.innerWidth, window.screen.width);
  if (panelRect.right > SCREEN_WIDTH) {
    const newLeft = Math.max(MARGIN, x + MARGIN - panelRect.width);
    const newCaretOffset = left - newLeft;
    panel.style.left = `${newLeft}px`;
    /** @type {HTMLElement} */
    const caret = panel.querySelector(".caret");
    caret.style.left = `${newCaretOffset}px`;
  }

  // As it's a dialog, we trap focus.
  // TODO: when <dialog> becomes a implemented, we should really
  // use that.
  trapFocus(panel, dfn);
}

/**
 * @param {HTMLElement} panel
 * @param {HTMLElement} dfn
 * @returns
 */
function trapFocus(panel, dfn) {
  /** @type NodeListOf<HTMLAnchorElement> elements */
  const anchors = panel.querySelectorAll("a[href]");
  // No need to trap focus
  if (!anchors.length) return;

  // Move focus to first anchor element
  const first = anchors.item(0);
  first.focus();

  const trapListener = createTrapListener(anchors, panel, dfn);
  panel.addEventListener("keydown", trapListener);

  // Hiding the panel releases the trap
  const mo = new MutationObserver(records => {
    const [record] = records;
    const target = /** @type HTMLElement */ (record.target);
    if (target.hidden) {
      panel.removeEventListener("keydown", trapListener);
      mo.disconnect();
    }
  });
  mo.observe(panel, { attributes: true, attributeFilter: ["hidden"] });
}

/**
 *
 * @param {NodeListOf<HTMLAnchorElement>} anchors
 * @param {HTMLElement} panel
 * @param {HTMLElement} dfn
 * @returns
 */
function createTrapListener(anchors, panel, dfn) {
  const lastIndex = anchors.length - 1;
  let currentIndex = 0;
  return event => {
    switch (event.key) {
      // Hitting "Tab" traps us in a nice loop around elements.
      case "Tab": {
        event.preventDefault();
        currentIndex += event.shiftKey ? -1 : +1;
        if (currentIndex < 0) {
          currentIndex = lastIndex;
        } else if (currentIndex > lastIndex) {
          currentIndex = 0;
        }
        anchors.item(currentIndex).focus();
        break;
      }

      // Hitting "Enter" on an anchor releases the trap.
      case "Enter":
        hidePanel(panel);
        break;

      // Hitting "Escape" returns focus to dfn.
      case "Escape":
        hidePanel(panel);
        dfn.focus();
        return;
    }
  };
}

/** @param {HTMLElement} panel */
function hidePanel(panel) {
  if (!panel) return;
  panel.hidden = true;
  panel.classList.remove("docked");
}
})()</script><script src="https://www.w3.org/scripts/TR/2021/fixup.js"></script></body></html>
